cnhis-design-vue 0.2.64-beta → 0.3.2-beta

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

@@ -1,108 +0,0 @@
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import defaultVaule from '../const/defaultVaule';
-
-export default {
-  name: 'fabric-bottom2',
-  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.drawBottom(this.templateData.bottom || null);
-      this.canvas.renderAll();
-    },
-    drawBottom(bottom) {
-      const { xScaleList, xScaleCell, originX, endX, endY, xCellWidth, canvasHeight } = this.propItems;
-      if (!bottom) {
-        this.canvas.add(new this.fabric.Line([0, canvasHeight - 1, endX, canvasHeight - 1], defaultVaule.borderStyle));
-        return false;
-      }
-      const height = canvasHeight - endY;
-      const list = [];
-      let flag = true; // 定义呼吸数值显示为靠上还是靠下
-      // 数据列表
-      xScaleList.forEach((item, index) => {
-        const left = originX + index * xCellWidth;
-        let text = '';
-        bottom.list.forEach((v, i) => {
-          const time = new Date(v.time).getTime();
-          if (time >= item && time < item + xScaleCell) text = v.value;
-        });
-        const style = flag
-          ? {
-              top: -(height / 2 - 10)
-            }
-          : {
-              top: height / 2 - 10
-            };
-        if (text) flag = !flag;
-        const group = this.drawTextGroup(
-          {
-            width: xCellWidth,
-            height,
-            ...defaultVaule.rectStyle
-          },
-          Object.assign(
-            {},
-            {
-              text: String(text),
-              ...defaultVaule.textStyle,
-              ...top.textGroupStyle
-            },
-            text ? style : {}
-          ),
-          {
-            left,
-            top: endY
-          }
-        );
-        list.push(group);
-      });
-      // 底部外框和标题名称
-      const titleGroup = this.drawTextGroup(
-        {
-          width: endX,
-          height: height - 1,
-          ...defaultVaule.rectStyle
-        },
-        {
-          text: String(bottom.name + bottom.unit),
-          ...defaultVaule.textStyle,
-          ...top.textGroupStyle,
-          left: -((endX - originX) / 2)
-        },
-        {
-          left: 0,
-          top: endY
-        }
-      );
-      list.push(titleGroup);
-      const group = list.length > 0 ? new this.fabric.Group([...list], { ...defaultVaule.style }) : null;
-      group && group.sendToBack(); // 向下跳底层
-      group && this.canvas.add(group);
-    }
-  },
-  render(h) {
-    return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  }
-};
-</script>

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

@@ -1,181 +0,0 @@
-<template>
-  <div>
-    <canvas :id="id"></canvas>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { fabric } from 'fabric';
-
-export default {
-  name: 'FabricCanvas2',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      canvas: null,
-      type: 'canvas',
-      canvasAttr: {
-        selectable: false,
-        evented: false,
-        selection: false,
-        containerClass: 'c-fabric-canvas-container',
-        fireRightClick: true
-      },
-      fabric: fabric
-    };
-  },
-  provide() {
-    return {
-      $canvas: () => this.canvas,
-      $group: () => null,
-      $fabric: () => fabric,
-      $propItems: () => {
-        return {
-          type: this.templateData.type,
-          endX: this.endX,
-          endY: this.endY,
-          originX: this.originX,
-          originY: this.originY,
-          gridYNumber: this.gridYNumber,
-          gridXNumber: this.gridXNumber,
-          canvasWidth: this.canvasWidth,
-          canvasHeight: this.canvasHeight,
-          xCellWidth: this.xCellWidth,
-          yCellHeight: this.yCellHeight,
-          table: { ...this.templateData.table },
-          xScaleList: this.xScaleList,
-          xScaleCell: this.xScaleCell,
-          breatheYCell: this.breatheYCell,
-          pulseYCell: this.pulseYCell,
-          centigradeYCell: this.centigradeYCell,
-          eventStyle: this.eventStyle
-        };
-      }
-    };
-  },
-  computed: {
-    canvasWidth() {
-      // 画布宽度
-      return this.templateData.canvasWidth;
-    },
-    canvasHeight() {
-      // 画布高度
-      return this.templateData.canvasHeight;
-    },
-    gridXNumber() {
-      // 网格水平方向总数    如果设置了默认值就直接取用
-      return this.templateData.table.mainXCell * this.templateData.table.subXCell;
-    },
-    gridYNumber() {
-      // 网格垂直方向总数
-      return this.templateData.table.mainYCell * this.templateData.table.subYCell;
-    },
-    originX() {
-      const originX = this.templateData.top.titleWidth;
-      const residue = (this.endX - originX) % this.gridXNumber;
-      return originX + residue;
-    },
-    originY() {
-      // 顶部列表高度 网格不需要的高度放到顶部始终存在的时间那一行，因为底部不一定存在列表
-      const { top } = this.templateData;
-      const dateHeight = top.date?.height || 0;
-      const dayHeight = top.dayHeight || 0;
-      const xScaleHeight = top.xScalevalue.height || 15;
-      const topHeight = dateHeight + dayHeight + xScaleHeight;
-      const residue = (this.endY - topHeight) % this.gridYNumber;
-      return topHeight + residue;
-    },
-    endX() {
-      // 网格区域水平方向最大坐标值, 也是整个画布右侧列表坐标起始值，网格右下角x轴坐标值
-      if (!this.templateData.right) return this.templateData.canvasWidth;
-      const endWidth = this.templateData.right.width || 50;
-      return this.templateData.canvasWidth - endWidth;
-    },
-    endY() {
-      // 画布高度 - 底部列表高度 ，网格右下角y轴坐标值
-      if (!this.templateData.bottom) return this.templateData.canvasHeight;
-      const endHeight = this.templateData.bottom.height || 30;
-      return this.canvasHeight - endHeight;
-    },
-    xCellWidth() {
-      // 水平方向网格宽度
-      return (this.endX - this.originX) / this.gridXNumber;
-    },
-    yCellHeight() {
-      // 垂直方向网格宽度
-      return (this.endY - this.originY) / this.gridYNumber;
-    },
-    // 转换为时间戳的x轴刻度list
-    xScaleList() {
-      const dateList = this.templateData.top.date.list;
-      const dayList = this.templateData.top.xScalevalue.list;
-      const timeList = dateList.map(item => {
-        return dayList.map(v => {
-          return new Date(`${item} ${v}:00`).getTime();
-        })
-      })
-      return timeList.flat();
-    },
-    // x轴每格的时间，比如4小时，不能刻度list长度值除以总格子数计算，因为有可能刻度比较短，不能满足所有的格子
-    xScaleCell() {
-      return this.xScaleList[1] - this.xScaleList[0]; // 返回时间戳
-    },
-    // y轴每一次的呼吸的高度值
-    breatheYCell() {
-      const leftYScalevalue = this.templateData.left.leftYScalevalue;
-      const list = leftYScalevalue.find(v => v.type === 'breathe').list;
-      return list ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / this.templateData.left.spaceGridNumber) : 0;
-    },
-    // y轴每mmHg的脉搏/心率的高度值
-    pulseYCell() {
-      const leftYScalevalue = this.templateData.left.leftYScalevalue;
-      const list = leftYScalevalue.find(v => v.type === 'pulse').list;
-      return this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / this.templateData.left.spaceGridNumber);
-    },
-    // y轴每摄氏度的高度值
-    centigradeYCell() {
-      const { leftYScalevalue, spaceGridNumber } = this.templateData.left;
-      const list = leftYScalevalue.find(v => v.type === 'centigrade').list;
-      return this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber);
-    },
-    eventStyle() {
-      return this.templateData.table?.eventStyle || { selectable: true, evented: true };
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.canvas = new this.fabric.Canvas('c-fabric-canvas', {
-        width: this.templateData.canvasWidth,
-        height: this.templateData.canvasHeight,
-        //   margin: [this.templateData.margin.top, this.templateData.margin.right, this.templateData.margin.bottom, this.templateData.margin.left],
-        ...this.canvasAttr
-      });
-    },
-    toDataURL(option) {
-      return this.canvas.toDataURL(option);
-    },
-    renderCanvas() {
-      this.canvas.clear();
-      // this.canvas.renderCanvas();
-    }
-  },
-  beforeDestroy() {
-    this.canvas.dispose();
-  }
-};
-</script>
-
-<style></style>