cnhis-design-vue 2.1.17 → 2.1.18

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>