cnhis-design-vue 2.1.16 → 2.1.17

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

@@ -1,133 +1,135 @@
-<template>
-  <TimeScaleValue v-if="templateData.top.xScalevalue.popupTop" :times="timeList" :templateData="templateData" />
-</template>
-
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import defaultVaule from '../const/defaultVaule';
-import TimeScaleValue from '../components/TimeScaleValue.vue';
-
-export default {
-  name: 'fabric-scale-value',
-  mixins: [fabricCommon],
-  components: {
-    TimeScaleValue
-  },
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      timeList: []
-    };
-  },
-  computed: {
-    defaultTextStyle() {
-      return {
-        ...defaultVaule.textStyle,
-        centeredRotation: true,
-        originX: 'center',
-        originY: 'center'
-      };
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.topScaleValue(this.templateData.top);
-      this.rightScaleValue(this.templateData.right);
-      this.leftScaleValue(this.templateData.left);
-      this.canvas.renderAll();
-    });
-  },
-  methods: {
-    // x轴时间刻度绘制
-    topScaleValue(obj) {
-      const { originX, originY, xCellWidth, spaceHeight } = this.propItems;
-      const spaceGridNumber = obj.xScalevalue.spaceGridNumber || 3;
-      const defaultSpaceMinute = obj.xScalevalue.defaultSpaceTime || 15;
-      const defaultSpaceTime = defaultSpaceMinute * 60 * 1000;
-      const style = obj.xScalevalue.style || {};
-      const customStyle = obj.xScalevalue.customStyle || {};
-      const top = originY - Math.floor(spaceHeight / 2);
-      let textList = [];
-      const list = obj.xScalevalue.list || [];
-      list.reduce((pre, cur, i) => {
-        const newStyle = pre && new Date(cur).getTime() - new Date(pre).getTime() < defaultSpaceTime ? { ...style, ...customStyle } : style;
-        const text = this.createText(cur.slice(-5), originX + i * spaceGridNumber * xCellWidth, top, 'center', newStyle);
-        textList.push(text);
-        this.timeList.push({
-          time: cur.slice(-5),
-          left: originX + i * spaceGridNumber * xCellWidth,
-          width: text.width
-        });
-        return cur;
-      }, '');
-      console.log(textList);
-      const group = new this.fabric.Group([...textList], {
-        evented: false,
-        selectable: false
-      });
-      this.canvas.add(group);
-      this.canvas.sendBackwards(group);
-    },
-    rightScaleValue(obj) {
-      const spaceGridNumber = obj.rightYScalevalue.spaceGridNumber || 2;
-      const marginLeft = obj.rightYScalevalue.marginLeft || 3;
-      const originX = this.propItems.endX + marginLeft;
-      const style = obj.rightYScalevalue.style ? obj.rightYScalevalue.style : {};
-      let textList = [];
-      obj.rightYScalevalue.list.forEach((item, index) => {
-        textList.push(this.createText(item, originX, this.propItems.endY - index * this.propItems.yCellHeight * spaceGridNumber, 'left', style));
-      });
-      // 添加单位
-      if (obj.rightYScalevalue.unit) {
-        const top = this.propItems.endY - obj.rightYScalevalue.list.length * this.propItems.yCellHeight * spaceGridNumber + this.propItems.yCellHeight;
-        textList.push(this.createText(obj.rightYScalevalue.unit, originX, top, 'left', style));
-      }
-      const group = new this.fabric.Group([...textList], {
-        evented: false,
-        selectable: false
-      });
-      this.canvas.add(group);
-      this.canvas.sendBackwards(group);
-    },
-    leftScaleValue(obj) {
-      const spaceGridNumber = obj.leftYScalevalue.spaceGridNumber || 2;
-      const marginRight = obj.leftYScalevalue.marginRight || 3;
-      const style = obj.leftYScalevalue.style || {};
-      const originX = this.propItems.originX - marginRight;
-      let textList = [];
-      obj.leftYScalevalue.list.forEach((item, index) => {
-        textList.push(this.createText(item, originX, this.propItems.endY - index * this.propItems.yCellHeight * spaceGridNumber, 'right', style));
-      });
-
-      // 添加标题和单位
-      let txt = '';
-      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 group = new this.fabric.Group([...textList], {
-        evented: false,
-        selectable: false
-      });
-      this.canvas.add(group);
-      this.canvas.sendBackwards(group);
-    },
-    createText(text, left, top, originX, style) {
-      return new this.fabric.Text(String(text), {
-        ...this.defaultTextStyle,
-        left,
-        top,
-        ...style,
-        originX
-      });
-    }
-  }
-};
-</script>
+<template>
+  <TimeScaleValue v-if="templateData.top.xScalevalue.popupTop" :times="timeList" :templateData="templateData" />
+</template>
+
+<script>
+import fabricCommon from '../mixins/fabricCommon';
+import defaultVaule from '../const/defaultVaule';
+import TimeScaleValue from '../components/TimeScaleValue.vue';
+
+export default {
+  name: 'fabric-scale-value',
+  mixins: [fabricCommon],
+  components: {
+    TimeScaleValue
+  },
+  props: {
+    templateData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      timeList: []
+    };
+  },
+  computed: {
+    defaultTextStyle() {
+      return {
+        ...defaultVaule.textStyle,
+        centeredRotation: true,
+        originX: 'center',
+        originY: 'center'
+      };
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.topScaleValue(this.templateData.top);
+      this.rightScaleValue(this.templateData.right);
+      this.leftScaleValue(this.templateData.left);
+      this.canvas.renderAll();
+    });
+  },
+  methods: {
+    // x轴时间刻度绘制
+    topScaleValue(obj) {
+      const { originX, originY, xCellWidth, spaceHeight } = this.propItems;
+      const spaceGridNumber = obj.xScalevalue.spaceGridNumber || 3;
+      const defaultSpaceMinute = obj.xScalevalue.defaultSpaceTime || 15;
+      const defaultSpaceTime = defaultSpaceMinute * 60 * 1000;
+      const style = obj.xScalevalue.style || {};
+      const customStyle = obj.xScalevalue.customStyle || {};
+      const top = originY - Math.floor(spaceHeight / 2);
+      let textList = [];
+      const list = obj.xScalevalue.list || [];
+      list.reduce((pre, cur, i) => {
+        const newStyle = pre && new Date(cur).getTime() - new Date(pre).getTime() < defaultSpaceTime ? { ...style, ...customStyle } : style;
+        const text = this.createText(cur.slice(-5), originX + i * spaceGridNumber * xCellWidth, top, 'center', newStyle);
+        textList.push(text);
+        this.timeList.push({
+          time: cur.slice(-5),
+          left: originX + i * spaceGridNumber * xCellWidth,
+          width: text.width
+        });
+        return cur;
+      }, '');
+      const group = new this.fabric.Group([...textList], {
+        evented: false,
+        selectable: false
+      });
+      this.canvas.add(group);
+      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;
+      const style = obj.rightYScalevalue.style ? obj.rightYScalevalue.style : {};
+      let textList = [];
+      obj.rightYScalevalue.list.forEach((item, index) => {
+        textList.push(this.createText(item, originX, this.propItems.endY - index * this.propItems.yCellHeight * spaceGridNumber, 'left', style));
+      });
+      // 添加单位
+      if (obj.rightYScalevalue.unit) {
+        const top = this.propItems.endY - obj.rightYScalevalue.list.length * this.propItems.yCellHeight * spaceGridNumber + this.propItems.yCellHeight;
+        textList.push(this.createText(obj.rightYScalevalue.unit, originX, top, 'left', style));
+      }
+      const group = new this.fabric.Group([...textList], {
+        evented: false,
+        selectable: false
+      });
+      this.canvas.add(group);
+      this.canvas.sendBackwards(group);
+    },
+    leftScaleValue(obj) {
+      const { endY, yCellHeight } = this.propItems;
+      const spaceGridNumber = obj.leftYScalevalue.spaceGridNumber || 2;
+      const [titleMarginRight, titleMarginButton] = obj.leftYScalevalue?.titleMargin || [5, 30];
+      const listMarginRight = obj.leftYScalevalue.listMarginRight || 3;
+      const style = obj.leftYScalevalue.style || {};
+      const originX = this.propItems.originX;
+      let textList = [];
+      obj.leftYScalevalue.list.forEach((item, index) => {
+        textList.push(this.createText(item, originX - listMarginRight, endY - index * yCellHeight * spaceGridNumber, 'right', style));
+      });
+
+      // 添加标题和单位
+      let txt = '';
+      txt = obj.leftYScalevalue.name || '';
+      if (obj.leftYScalevalue.unit) txt += '\n' + obj.leftYScalevalue.unit;
+      if (txt) {
+        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,
+        selectable: false
+      });
+      this.canvas.add(group);
+      this.canvas.sendBackwards(group);
+    },
+    createText(text, left, top, originX, style) {
+      return new this.fabric.Text(String(text), {
+        ...this.defaultTextStyle,
+        left,
+        top,
+        ...style,
+        originX
+      });
+    }
+  }
+};
+</script>