cnhis-design-vue 2.1.30 → 2.1.31

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

@@ -1,113 +1,113 @@
-<template>
-  <div v-show="isShow" class="c-time-scalevalue" :style="{ '--left': popupStyle.left, '--top': popupStyle.top, '--height': popupStyle.height, '--width': popupStyle.width }">
-    <span
-      class="c-time-scalevalue-list"
-      v-show="index % 2 == 0"
-      v-for="(item, index) in times"
-      :key="item.left"
-      :style="{ left: `${item.left - item.width / 2}px`, '--font-size': popupStyle.fontSize }"
-    >
-      {{ item.time }}
-    </span>
-  </div>
-</template>
-
-<script>
-// import Vue from 'vue';
-// import DomPortal from 'vue-dom-portal';
-import vexutils from '@/utils/vexutils';
-import fabricCommon from '../mixins/fabricCommon';
-
-export default {
-  mixins: [fabricCommon],
-  props: {
-    times: {
-      type: Array,
-      required: true
-    }
-    // to: {
-    //   type: String,
-    //   default: 'body'
-    // }
-  },
-  // beforeCreate() {
-  //   Vue.use(DomPortal);
-  // },
-  data() {
-    return {
-      cFabricChart: null,
-      scrollEvent: null,
-      top: 0,
-      popupStyle: {
-        width: '1000px',
-        height: '80px',
-        left: 0,
-        top: 0,
-        fontSize: '12px'
-      },
-      isShow: false
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        this.init();
-      }, 0);
-    });
-  },
-  methods: {
-    init() {
-      // 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.popupStyle = {
-        left: `${this.cFabricChart.getBoundingClientRect().left}px`,
-        top: `${xScalevalue?.popupTop || 0}px`,
-        width: `${canvasWidth}px`,
-        height: `${spaceHeight}px`,
-        fontSize: `${xScalevalue.style?.fontSize || 12}px`
-      };
-      // const spaceGridNumber = xScalevalue.spaceGridNumber || 3;
-      // this.marginLeft = `${xCellWidth * spaceGridNumber}px`;
-      // 节流的间隔时间不宜太大，因为实际top值不准，会造成判断条件不准确
-      this.scrollEvent = vexutils.throttle(this.scroll, 100);
-      window.addEventListener('scroll', this.scrollEvent, true);
-    },
-    scroll() {
-      if (this.cFabricChart) {
-        const { originY, spaceHeight } = this.propItems;
-        const top = this.cFabricChart.getBoundingClientRect().top;
-        const newOriginY = originY - spaceHeight;
-        const { xScalevalue } = this.$attrs.templateData.top || {};
-        const popupTop = xScalevalue?.popupTop || 0;
-        this.isShow = top + newOriginY < popupTop ? true : false;
-      }
-    }
-  },
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.scroll, true);
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.c-time-scalevalue {
-  position: fixed;
-  z-index: 999;
-  left: var(--left);
-  top: var(--top);
-  width: var(--width);
-  height: var(--height);
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  &-list {
-    position: absolute;
-    line-height: var(--height);
-    transform-origin: center;
-    font-size: var(--font-size);
-  }
-}
-</style>
+<template>
+  <div v-show="isShow" class="c-time-scalevalue" :style="{ '--left': popupStyle.left, '--top': popupStyle.top, '--height': popupStyle.height, '--width': popupStyle.width }">
+    <span
+      class="c-time-scalevalue-list"
+      v-show="index % 2 == 0"
+      v-for="(item, index) in times"
+      :key="item.left"
+      :style="{ left: `${item.left - item.width / 2}px`, '--font-size': popupStyle.fontSize }"
+    >
+      {{ item.time }}
+    </span>
+  </div>
+</template>
+
+<script>
+// import Vue from 'vue';
+// import DomPortal from 'vue-dom-portal';
+import vexutils from '@/utils/vexutils';
+import fabricCommon from '../mixins/fabricCommon';
+
+export default {
+  mixins: [fabricCommon],
+  props: {
+    times: {
+      type: Array,
+      required: true
+    }
+    // to: {
+    //   type: String,
+    //   default: 'body'
+    // }
+  },
+  // beforeCreate() {
+  //   Vue.use(DomPortal);
+  // },
+  data() {
+    return {
+      cFabricChart: null,
+      scrollEvent: null,
+      top: 0,
+      popupStyle: {
+        width: '1000px',
+        height: '80px',
+        left: 0,
+        top: 0,
+        fontSize: '12px'
+      },
+      isShow: false
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.init();
+      }, 0);
+    });
+  },
+  methods: {
+    init() {
+      // 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.popupStyle = {
+        left: `${this.cFabricChart.getBoundingClientRect().left}px`,
+        top: `${xScalevalue?.popupTop || 0}px`,
+        width: `${canvasWidth}px`,
+        height: `${spaceHeight}px`,
+        fontSize: `${xScalevalue.style?.fontSize || 12}px`
+      };
+      // const spaceGridNumber = xScalevalue.spaceGridNumber || 3;
+      // this.marginLeft = `${xCellWidth * spaceGridNumber}px`;
+      // 节流的间隔时间不宜太大，因为实际top值不准，会造成判断条件不准确
+      this.scrollEvent = vexutils.throttle(this.scroll, 100);
+      window.addEventListener('scroll', this.scrollEvent, true);
+    },
+    scroll() {
+      if (this.cFabricChart) {
+        const { originY, spaceHeight } = this.propItems;
+        const top = this.cFabricChart.getBoundingClientRect().top;
+        const newOriginY = originY - spaceHeight;
+        const { xScalevalue } = this.$attrs.templateData.top || {};
+        const popupTop = xScalevalue?.popupTop || 0;
+        this.isShow = top + newOriginY < popupTop ? true : false;
+      }
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.scroll, true);
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.c-time-scalevalue {
+  position: fixed;
+  z-index: 999;
+  left: var(--left);
+  top: var(--top);
+  width: var(--width);
+  height: var(--height);
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  &-list {
+    position: absolute;
+    line-height: var(--height);
+    transform-origin: center;
+    font-size: var(--font-size);
+  }
+}
+</style>

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/FabricScaleValue.vue

@@ -1,135 +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;
-      }, '');
-      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>
+<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>