cnhis-design-vue 2.1.18 → 2.1.19

package/packages/fabric-chart/src/fabric-chart2/FabricTop.vue

@@ -1,172 +1,172 @@
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import defaultVaule from '../const/defaultVaule';
-
-export default {
-  name: 'fabric-top2',
-  mixins: [fabricCommon, draw],
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  computed: {
-    girdLineStyle() {
-      return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
-    }
-  },
-  methods: {
-    init() {
-      this.drawTop(this.templateData.top);
-      this.canvas.renderAll();
-    },
-    drawTop(top) {
-      let list = [];
-      // 日期
-      this.drawTopDate(top, list);
-      // 上午/下午
-      this.drawTopDay(top, list);
-      // 时间刻度
-      this.drawTopTime(top, list);
-      const group = list.length > 0 ? new this.fabric.Group([...list], { ...defaultVaule.style }) : null;
-      group && group.sendToBack(); // 向下跳底层
-      group && this.canvas.add(group);
-    },
-    drawTopTime(top, list) {
-      const { originX, originY, xCellWidth, table } = this.propItems;
-      const dateHeight = top.date?.height || 0;
-      const dayHeight = top.dayHeight || 0;
-      const height = originY - dateHeight - dayHeight;
-      const titleHeight = dayHeight + height;
-      // 标题
-      const title = this.drawTextGroup(
-        {
-          width: originX,
-          height: titleHeight,
-          ...defaultVaule.rectStyle
-        },
-        {
-          text: String(top.xScalevalue.title),
-          ...defaultVaule.textStyle,
-          ...top.textGroupStyle
-        },
-        {
-          left: 0,
-          top: dateHeight
-        }
-      );
-      list.push(title);
-
-      // 时间列表
-      let timeList = [];
-      for (let j = 0; j < table.mainXCell; j++) {
-        timeList.push(top.xScalevalue.list);
-      }
-      timeList.flat().forEach((v, i) => {
-        const left = originX + i * xCellWidth;
-        const textGroup = this.drawTextGroup(
-          {
-            width: xCellWidth,
-            height
-          },
-          {
-            text: String(v),
-            ...defaultVaule.textStyle,
-            ...top.textGroupStyle
-          },
-          {
-            left,
-            top: dateHeight + dayHeight
-          }
-        );
-        list.push(textGroup);
-      });
-    },
-    drawTopDay(top, list) {
-      if (!top.dayHeight) return false;
-      const { originX, xCellWidth, gridXNumber, table } = this.propItems;
-      const height = top.dayHeight;
-      // 上午下午列表
-      const width = xCellWidth * table.subSecondXCell;
-      const dayList = gridXNumber / table.subSecondXCell;
-      for (let i = 0; i < dayList; i++) {
-        const left = originX + i * width;
-        const value = i % 2 === 0 ? '上午' : '下午';
-        const textGroup = this.drawTextGroup(
-          {
-            width,
-            height
-          },
-          {
-            text: String(value),
-            ...defaultVaule.textStyle,
-            ...top.textGroupStyle
-          },
-          {
-            left,
-            top: top.date.height || 0
-          }
-        );
-        list.push(textGroup);
-      }
-    },
-    drawTopDate(top, list) {
-      if (!top.date.height) return false;
-      const { originX, xCellWidth, table } = this.propItems;
-      const height = top.date.height;
-      // 标题
-      const title = this.drawTextGroup(
-        {
-          width: originX,
-          height,
-          ...defaultVaule.rectStyle
-        },
-        {
-          text: String(top.date.title),
-          ...defaultVaule.textStyle,
-          ...top.textGroupStyle
-        },
-        {
-          left: 0,
-          top: 0
-        }
-      );
-      list.push(title);
-      // 日期列表
-      const width = xCellWidth * table.subXCell;
-      top.date.list.forEach((v, i) => {
-        const left = originX + i * width;
-        const textGroup = this.drawTextGroup(
-          {
-            width,
-            height
-          },
-          {
-            text: String(v),
-            ...defaultVaule.textStyle,
-            ...top.textGroupStyle
-          },
-          {
-            left,
-            top: 0
-          }
-        );
-        list.push(textGroup);
-      });
-    }
-  },
-  render(h) {
-    return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  }
-};
-</script>
+<script>
+import fabricCommon from '../mixins/fabricCommon';
+import draw from '../mixins/draw';
+import defaultVaule from '../const/defaultVaule';
+
+export default {
+  name: 'fabric-top2',
+  mixins: [fabricCommon, draw],
+  props: {
+    templateData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  computed: {
+    girdLineStyle() {
+      return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
+    }
+  },
+  methods: {
+    init() {
+      this.drawTop(this.templateData.top);
+      this.canvas.renderAll();
+    },
+    drawTop(top) {
+      let list = [];
+      // 日期
+      this.drawTopDate(top, list);
+      // 上午/下午
+      this.drawTopDay(top, list);
+      // 时间刻度
+      this.drawTopTime(top, list);
+      const group = list.length > 0 ? new this.fabric.Group([...list], { ...defaultVaule.style }) : null;
+      group && group.sendToBack(); // 向下跳底层
+      group && this.canvas.add(group);
+    },
+    drawTopTime(top, list) {
+      const { originX, originY, xCellWidth, table } = this.propItems;
+      const dateHeight = top.date?.height || 0;
+      const dayHeight = top.dayHeight || 0;
+      const height = originY - dateHeight - dayHeight;
+      const titleHeight = dayHeight + height;
+      // 标题
+      const title = this.drawTextGroup(
+        {
+          width: originX,
+          height: titleHeight,
+          ...defaultVaule.rectStyle
+        },
+        {
+          text: String(top.xScalevalue.title),
+          ...defaultVaule.textStyle,
+          ...top.textGroupStyle
+        },
+        {
+          left: 0,
+          top: dateHeight
+        }
+      );
+      list.push(title);
+
+      // 时间列表
+      let timeList = [];
+      for (let j = 0; j < table.mainXCell; j++) {
+        timeList.push(top.xScalevalue.list);
+      }
+      timeList.flat().forEach((v, i) => {
+        const left = originX + i * xCellWidth;
+        const textGroup = this.drawTextGroup(
+          {
+            width: xCellWidth,
+            height
+          },
+          {
+            text: String(v),
+            ...defaultVaule.textStyle,
+            ...top.textGroupStyle
+          },
+          {
+            left,
+            top: dateHeight + dayHeight
+          }
+        );
+        list.push(textGroup);
+      });
+    },
+    drawTopDay(top, list) {
+      if (!top.dayHeight) return false;
+      const { originX, xCellWidth, gridXNumber, table } = this.propItems;
+      const height = top.dayHeight;
+      // 上午下午列表
+      const width = xCellWidth * table.subSecondXCell;
+      const dayList = gridXNumber / table.subSecondXCell;
+      for (let i = 0; i < dayList; i++) {
+        const left = originX + i * width;
+        const value = i % 2 === 0 ? '上午' : '下午';
+        const textGroup = this.drawTextGroup(
+          {
+            width,
+            height
+          },
+          {
+            text: String(value),
+            ...defaultVaule.textStyle,
+            ...top.textGroupStyle
+          },
+          {
+            left,
+            top: top.date.height || 0
+          }
+        );
+        list.push(textGroup);
+      }
+    },
+    drawTopDate(top, list) {
+      if (!top.date.height) return false;
+      const { originX, xCellWidth, table } = this.propItems;
+      const height = top.date.height;
+      // 标题
+      const title = this.drawTextGroup(
+        {
+          width: originX,
+          height,
+          ...defaultVaule.rectStyle
+        },
+        {
+          text: String(top.date.title),
+          ...defaultVaule.textStyle,
+          ...top.textGroupStyle
+        },
+        {
+          left: 0,
+          top: 0
+        }
+      );
+      list.push(title);
+      // 日期列表
+      const width = xCellWidth * table.subXCell;
+      top.date.list.forEach((v, i) => {
+        const left = originX + i * width;
+        const textGroup = this.drawTextGroup(
+          {
+            width,
+            height
+          },
+          {
+            text: String(v),
+            ...defaultVaule.textStyle,
+            ...top.textGroupStyle
+          },
+          {
+            left,
+            top: 0
+          }
+        );
+        list.push(textGroup);
+      });
+    }
+  },
+  render(h) {
+    return this.$slots.default ? h('div', this.$slots.default) : undefined;
+  }
+};
+</script>

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

@@ -1,7 +1,4 @@
-import {
-  isNumber,
-  isObject
-} from './type';
+import { isNumber, isObject } from './type';
 
 export default {
   name: 'draw',
@@ -33,7 +30,7 @@ export default {
       defaultGroupStyle: {
         evented: false,
         selectable: false
-      },
+      }
     };
   },
   components: {},
@@ -43,9 +40,11 @@ export default {
       if (!Array.isArray(points)) return null; // 坐标点非数组
       if (points.length < 4) return null; // 坐标点位数不足 无法完成线的绘制
       if (points.filter(point => isNumber(point)).length < 4) return null; // 坐标点内可用数值不足 无法完成线的绘制
-      const lineStyle = this.isObject(style) ? {
-        ...style
-      } : {};
+      const lineStyle = this.isObject(style)
+        ? {
+            ...style
+          }
+        : {};
       return new this.fabric.Line(points, {
         ...this.defaultLineStyle,
         ...lineStyle
@@ -57,18 +56,24 @@ export default {
     // },
     // 绘制文本区
     drawTextGroup(rectStyle, fontStyle, groupStyle) {
-      const rect_style = this.isObject(rectStyle) ? {
-        ...rectStyle
-      } : {};
-      const font_style = this.isObject(fontStyle) ? {
-        ...fontStyle
-      } : {};
-      const group_style = this.isObject(groupStyle) ? {
-        ...groupStyle
-      } : {
-        left: 0,
-        top: 0
-      };
+      const rect_style = this.isObject(rectStyle)
+        ? {
+            ...rectStyle
+          }
+        : {};
+      const font_style = this.isObject(fontStyle)
+        ? {
+            ...fontStyle
+          }
+        : {};
+      const group_style = this.isObject(groupStyle)
+        ? {
+            ...groupStyle
+          }
+        : {
+            left: 0,
+            top: 0
+          };
       if (!this.isNumber(rect_style.width) || !this.isNumber(rect_style.height)) return null; // rect容器宽高必须全部是可用数字类型 否则无法画出正确的容器
 
       !this.isNumber(group_style.left) && (group_style.left = 0);
@@ -121,8 +126,8 @@ export default {
         img.setAttribute('src', src);
         img.onload = () => {
           resolve(img);
-        }
-      })
+        };
+      });
     },
     // 画出+
     createAdd(data) {
@@ -138,8 +143,8 @@ export default {
       });
       return new this.fabric.Group([line1, line2], {
         scale: 1,
-        ...data,
-      })
+        ...data
+      });
     },
     // 画出圆边框
     createCircleBorder(data) {
@@ -149,37 +154,43 @@ export default {
         radius: data.width / 2,
         scale: 1,
         fill: '#fff',
-        ...data,
+        ...data
       });
     },
     // 画出v
     createArrow(data) {
       const width = data.width || 10;
       const height = data.height || 10;
-      return new this.fabric.Polyline([
-        { x: 0, y: 0 },
-        { x: width / 2, y: height },
-        { x: width, y: 0 },
-      ], {
-        scale: 1,
-        ...data,
-      })
+      return new this.fabric.Polyline(
+        [
+          { x: 0, y: 0 },
+          { x: width / 2, y: height },
+          { x: width, y: 0 }
+        ],
+        {
+          scale: 1,
+          ...data
+        }
+      );
     },
     // 机械通气
     createJXTQ(data) {
       const width = data.width || 25;
       const height = data.height || 10;
-      return new this.fabric.Polyline([
-        { x: 0, y: height },
-        { x: width / 5, y: 0 },
-        { x: width / 5 * 2, y: height },
-        { x: width / 5 * 3, y: 0 },
-        { x: width / 5 * 4, y: height },
-        { x: width / 5 * 5, y: 0 }
-      ], {
-        scale: 1,
-        ...data,
-      })
+      return new this.fabric.Polyline(
+        [
+          { x: 0, y: height },
+          { x: width / 5, y: 0 },
+          { x: (width / 5) * 2, y: height },
+          { x: (width / 5) * 3, y: 0 },
+          { x: (width / 5) * 4, y: height },
+          { x: (width / 5) * 5, y: 0 }
+        ],
+        {
+          scale: 1,
+          ...data
+        }
+      );
     },
     ceateLineArrow(data) {
       const line = new this.fabric.Line([data.left, data.top, data.left + data.width, data.top], {
@@ -199,10 +210,11 @@ export default {
       });
       return new this.fabric.Group([line, arrow], {
         scale: 1,
-        ...data,
+        ...data
       });
     },
     async createPoint(type, data) {
+      data.hoverCursor = 'pointer';
       let obj1, obj2;
       switch (type) {
         case 'triangle':
@@ -228,21 +240,18 @@ export default {
             const common = {
               originX: 'center',
               originY: 'center',
-              ...data,
+              ...data
             };
             if (data.url) {
-              this.fabric.Image.fromURL(data.url, function (img) {
-                const {
-                  width,
-                  height
-                } = img;
+              this.fabric.Image.fromURL(data.url, function(img) {
+                const { width, height } = img;
                 img.set({
                   ...common,
                   scaleX: (data.width || width) / width,
                   scaleY: (data.height || height) / height,
                   width: width || data.width,
                   height: height || data.height,
-                  scale: (data.width || width) / width,
+                  scale: (data.width || width) / width
                 });
                 resolve(img);
               });
@@ -266,7 +275,7 @@ export default {
             scale: 1,
             ...data,
             angle: 0
-          })
+          });
         case 'shks':
           obj1 = new this.fabric.Circle({
             objectCaching: false,
@@ -280,15 +289,15 @@ export default {
           obj2 = this.createCircleBorder(data);
           return new this.fabric.Group([obj2, obj1], {
             scale: 1,
-            ...data,
-          })
+            ...data
+          });
         case 'cg':
           obj1 = this.ceateLineArrow(data);
           obj2 = this.createCircleBorder(data);
           return new this.fabric.Group([obj2, obj1], {
             scale: 1,
-            ...data,
-          })
+            ...data
+          });
         case 'jxtq':
           return this.createJXTQ(data);
         default:
@@ -299,10 +308,9 @@ export default {
             scale: 1,
             fontSize: 14,
             fill: '#000',
-            ...data,
-          })
-          
+            ...data
+          });
       }
-    },
+    }
   }
-};
+};

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

@@ -1,9 +1,7 @@
-
 export default {
   name: 'eventCommon',
   data() {
-    return {
-    };
+    return {};
   },
   mounted() {
     if (this.eventStyle.evented) {
@@ -13,16 +11,17 @@ export default {
   },
   methods: {
     // 折线点移动限制 目前仅限制不能移动出画布
-    pointMoveLimit(point) {
+    pointMoveLimit(point, isLimit = true) {
       point.setCoords(); // 需调用setCoords()才能重新计算控制位置(改变Object状态)
       // const objBoundingBox = point.getBoundingRect(); // 此方式会导致结果不精准，应该用point的top值判断
-      const leftLimit = point.prevPoint ? point.prevPoint.get('left') : this.propItems.originX;
-      const rightLimit = point.nextPoint ? point.nextPoint.get('left') : this.propItems.endX;
-      if (point.top < this.propItems.originY) {
-        point.set('top', this.propItems.originY);
+      const { originX, endX, originY, endY } = this.propItems;
+      const leftLimit = point.prevPoint?.get('left') || originX;
+      const rightLimit = (isLimit && point.nextPoint?.get('left')) || endX;
+      if (point.top < originY) {
+        point.set('top', originY);
       }
-      if (point.top > this.propItems.endY) {
-        point.set('top', this.propItems.endY);
+      if (point.top > endY) {
+        point.set('top', endY);
       }
       if (point.left < leftLimit) {
         point.set('left', leftLimit);