cnhis-design-vue 2.2.3 → 2.2.5

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

@@ -1,396 +0,0 @@
-<template>
-  <div>
-    <canvas :id="id"></canvas>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { fabric } from 'fabric';
-import defaultVaule from '../const/defaultVaule';
-import vexutils from '@/utils/vexutils';
-
-export default {
-  name: 'FabricCanvas',
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      id: `c-fabric-canvas-${Date.now()}`,
-      canvas: null,
-      type: 'canvas',
-      canvasAttr: {
-        selectable: false,
-        evented: false,
-        selection: false,
-        containerClass: 'c-fabric-canvas-container',
-        fireRightClick: true
-      },
-      fabric: fabric,
-      gridYnumberTop: 0,
-      levelRow: 0, //  左上角树形表格竖形层级
-      treeList: []
-    };
-  },
-  provide() {
-    return {
-      $canvas: () => this.canvas,
-      $group: () => null,
-      $fabric: () => fabric,
-      $propItems: () => {
-        return {
-          type: this.templateData.type,
-          endX: this.endX,
-          endY: this.endY,
-          markHeight: this.markHeight,
-          originX: this.originX,
-          originY: this.originY,
-          treeTableminCellWidth: this.treeTableminCellWidth,
-          gridYNumber: this.gridYNumber,
-          gridXNumber: this.gridXNumber,
-          canvasWidth: this.canvasWidth,
-          canvasHeight: this.canvasHeight,
-          xCellWidth: this.xCellWidth,
-          yCellHeight: this.yCellHeight,
-          table: { ...this.templateData.table },
-          spaceHeight: this.spaceHeight,
-          originYTime: this.originYTime,
-          gridYnumberTop: this.gridYnumberTop,
-          yCellHeightTop: this.yCellHeightTop,
-          originYTop: this.originYTop,
-          endYTop: this.endYTop,
-          treeList: this.treeList,
-          xScaleList: this.xScaleList,
-          xScaleCellList: this.xScaleCellList,
-          yScaleCellLeft: this.yScaleCellLeft,
-          yScaleCellRight: this.yScaleCellRight,
-          eventStyle: this.eventStyle,
-          topTotal: this.topTotal,
-          operable: this.operable
-        };
-      }
-    };
-  },
-  created() {
-    if (!this.templateData.top) {
-      try {
-        throw new Error('缺少顶部数据对象, 无法生成水平方向刻度');
-      } catch (error) {
-        console.warn(error);
-      }
-    }
-    if (!this.templateData.left) {
-      try {
-        throw new Error('缺少左侧数据对象, 无法生成垂直方向刻度');
-      } catch (error) {
-        console.warn(error);
-      }
-    }
-
-    this.throttleEvent = vexutils.throttle((event, componentInstance) => {
-      if (!componentInstance) return;
-      const { eventStyle = null, handleMoving = null } = componentInstance;
-      eventStyle.evented && handleMoving?.(event);
-    }, 50);
-  },
-  computed: {
-    canvasWidth() {
-      // 画布宽度
-      return this.templateData.canvasWidth;
-    },
-    canvasHeight() {
-      // 画布高度
-      return this.templateData.canvasHeight;
-    },
-    layout() {
-      return (
-        this.templateData.layout || {
-          top: 'drug',
-          center: 'xAxis',
-          bottom: 'intraoperatively'
-        }
-      );
-    },
-    treeTableminCellWidth() {
-      return this.templateData.top?.treeTableminCellWidth || this.templateData.left?.titleWidth || 20;
-    },
-    topTotal() {
-      return this.templateData.top?.total ? { ...defaultVaule.topTotal, ...this.templateData.top.total } : defaultVaule.topTotal;
-    },
-    gridXNumber() {
-      // 网格水平方向总数    如果设置了默认值就直接取用
-      if (this.templateData.table.mainXCell && this.templateData.table.subXCell) {
-        return this.templateData.table.mainXCell * this.templateData.table.subXCell;
-      }
-      // 如果没设置 就从顶部列表内自己计算一下 list遍历后将每一项完全展开后的数组长度存入topListLength取出最大值即可
-      const spaceGridNumber = this.templateData.top?.xScalevalue?.spaceGridNumber || defaultVaule.topSpaceGridNumber;
-      return (this.templateData.top?.xScalevalue?.list?.length || 1) * spaceGridNumber;
-    },
-    gridYNumber() {
-      // 网格垂直方向总数
-      return this.templateData.table.mainYCell * this.templateData.table.subYCell;
-    },
-    originX() {
-      // 网格左侧起始坐标 X, 也是整个区域左侧列表坐标最大坐标值 取出初始化后网格区域水平方向多出的余数 添加到左栏宽度上
-      const originX = this.templateData.top?.treeTableWidth || this.templateData.left?.width || 200;
-      const residue = (this.endX - originX) % this.gridXNumber;
-      return originX + residue;
-    },
-    originY() {
-      // 主网格起始高度值
-      const currentLayout = this.getLayout('intraoperatively') || 'bottom';
-      return this.getOriginTop(currentLayout);
-    },
-    endX() {
-      // 术中监测结束x坐标
-      if (!this.templateData.right && !this.topTotal) return this.templateData.canvasWidth;
-      return this.templateData.canvasWidth - (this.templateData.right?.width ?? 20) - this.topTotal.width;
-    },
-    endY() {
-      // 术中监测结束y坐标
-      return this.originY + (this.canvasHeight - this.gridHeightTop - this.spaceHeight - this.markHeight);
-    },
-    xCellWidth() {
-      // 水平方向网格宽度
-      return (this.endX - this.originX) / this.gridXNumber;
-    },
-    yCellHeight() {
-      // 垂直方向网格宽度
-      return (this.endY - this.originY) / this.gridYNumber;
-    },
-    // 标记部分高度值
-    markHeight() {
-      const { show = true, height } = this.templateData.bottom || {};
-      if (!show || !height) return 0;
-      return height;
-    },
-    spaceHeight() {
-      // 头部表格底部空白位置的高，用于显示x轴时间点
-      return this.templateData.top?.spaceHeight || defaultVaule.topSpaceHeight;
-    },
-    originYTime() {
-      const currentLayout = this.getLayout('xAxis') || 'center';
-      return this.getOriginTop(currentLayout);
-    },
-    yCellHeightTop() {
-      // 头部表格垂直方向网格高度
-      return this.templateData.top?.treeTableminCellHeight || 20;
-    },
-    // x轴高度值
-    gridHeightTop() {
-      return this.gridYnumberTop * this.yCellHeightTop;
-    },
-    // 用药区域起始y坐标
-    originYTop() {
-      const currentLayout = this.getLayout('drug') || 'center';
-      return this.getOriginTop(currentLayout);
-    },
-    // 用药区域结束y坐标
-    endYTop() {
-      return this.originYTop + this.gridHeightTop;
-    },
-    // 转换为时间戳的x轴时间列表
-    xScaleList() {
-      const list = this.templateData.top?.xScalevalue?.list || [];
-      return list.map(item => {
-        return new Date(item).getTime();
-      });
-    },
-    // x轴每个网格每1px的毫秒值和每个网格刻度对应的时间戳和每个网格对应的像素px值，返回一个list数组
-    xScaleCellList() {
-      const { spaceGridNumber = 3 } = this.templateData.top?.xScalevalue || {};
-      const list = [];
-      this.xScaleList.forEach((v, j) => {
-        if (this.xScaleList[j + 1]) {
-          const cellTime = (this.xScaleList[j + 1] - v) / spaceGridNumber;
-          const scaleCellTime = cellTime / this.xCellWidth;
-          const left = this.originX + this.xCellWidth * spaceGridNumber * j;
-          for (let i = 0; i < spaceGridNumber; i++) {
-            list.push({
-              x: left + i * this.xCellWidth, // 网格刻度对应的坐标值，单位px
-              time: v + i * cellTime, // 网格刻度对应的时间戳
-              xScaleTime: scaleCellTime // 每个网格每1px的毫秒值
-            });
-          }
-        }
-      });
-      return list;
-    },
-    // y轴每mmHg的脉搏/血压的高度值
-    yScaleCellLeft() {
-      const list = this.templateData.left?.leftYScalevalue?.list || [];
-      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.left?.leftYScalevalue?.spaceGridNumber || defaultVaule.leftSpaceGridNumber)) : 10;
-    },
-    // y轴每摄氏度的高度值
-    yScaleCellRight() {
-      const list = this.templateData.right?.rightYScalevalue?.list || [];
-      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.right?.rightYScalevalue?.spaceGridNumber || defaultVaule.rightSpaceGridNumber)) : 10;
-    },
-    eventStyle() {
-      return this.templateData.table?.eventStyle || { selectable: true, evented: true };
-    },
-    operable() {
-      return this.templateData.table?.operable || { set: false, detail: false, connect: false, lockMovementX: false };
-    },
-    fabricLinesInstances() {
-      return this.$slots.default.find(VNode => /fabric-lines/.test(VNode.tag))?.componentInstance;
-    },
-    fabricPolylinesInstances() {
-      // return this.$slots.default.filter(VNode => /(polylines)|(lines)/.test(VNode.tag));
-      return this.$slots.default.find(VNode => /polylines/.test(VNode.tag))?.componentInstance;
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      const { canvasWidth, canvasHeight, top } = this.templateData;
-      this.canvas = new this.fabric.Canvas(this.id, {
-        width: canvasWidth,
-        height: canvasHeight,
-        ...this.canvasAttr
-      });
-
-      if ((typeof top?.show === 'undefined' || top?.show) && top?.list?.length) {
-        this.getGridYnumberTop(top.list);
-        this.treeList = this.setTreeStyle(vexutils.clone(top.list, true));
-      }
-
-      this.canvas.on('mouse:move', event => {
-        const { target, pointer } = event;
-        const { x, y } = pointer;
-        const { originX, endX, originY, endY, originYTop, endYTop } = this;
-        if (x > originX && x < endX && y > originYTop && y < endYTop && !target) {
-          this.throttleEvent?.(event, this.fabricLinesInstances);
-          this.fabricPolylinesInstances.isDropVisible = false;
-        } else if (x > originX && x < endX && y > originY && y < endY && !target) {
-          this.throttleEvent?.(event, this.fabricPolylinesInstances);
-          if (this.fabricLinesInstances) this.fabricLinesInstances.isDropVisible = false;
-        } else if (x <= originX || x >= endX || !((y > originY && y < endY) || (y > originYTop && y < endYTop))) {
-          this.fabricPolylinesInstances.isDropVisible = false;
-          if (this.fabricLinesInstances) this.fabricLinesInstances.isDropVisible = false;
-        }
-      });
-    },
-    // 根据布局名称获取其位置
-    getLayout(moduleName) {
-      let layout = '';
-      Object.entries(this.layout).some(([key, value]) => {
-        if (value === moduleName) {
-          layout = key;
-          return true;
-        }
-        return;
-      });
-      return layout;
-    },
-    // 根据定位获取模块高度值
-    getLayoutHeight(layout) {
-      const moduleName = this.layout[layout];
-      switch (moduleName) {
-        case 'drug':
-          return this.gridHeightTop;
-        case 'xAxis':
-          return this.spaceHeight;
-        default:
-          return this.canvasHeight - this.gridHeightTop - this.spaceHeight;
-      }
-    },
-    // 根据定位获取模块起始y坐标
-    getOriginTop(layout) {
-      switch (layout) {
-        case 'top':
-          return 0;
-        case 'center':
-          return this.getLayoutHeight('top');
-        default:
-          return this.getLayoutHeight('top') + this.getLayoutHeight('center');
-      }
-    },
-    getGridYnumberTop(list) {
-      // 头部表格垂直方向网格总数
-      for (let i = 0; i < list.length; i++) {
-        if (list[i]?.children?.length) {
-          this.getGridYnumberTop(list[i].children);
-        } else {
-          this.gridYnumberTop++;
-        }
-      }
-    },
-    /**
-     * @description: 计算出每个单元格的横竖级别（即左上角的坐标）和width、height值
-     * @param {树形数据} list
-     * @param {深度值，即当前对象的列的级别} levelCol
-     * @return {*}
-     */
-
-    setTreeStyle(list, levelCol = 0, _node) {
-      const arr = [];
-      const { treeTableminCellWidth, treeTableminCellHeight } = this.templateData.top;
-      for (let i = 0; i < list.length; i++) {
-        const node = list[i];
-        const __node = vexutils.clone(node, true);
-        Reflect.deleteProperty(__node, 'children');
-        const obj = {};
-        if (!_node) {
-          node.origin = [__node];
-        } else {
-          node.origin = [..._node.origin, __node];
-        }
-        Object.assign(obj, {
-          title: node.title || '',
-          left: levelCol * treeTableminCellWidth,
-          top: this.levelRow * treeTableminCellHeight + this.originYTop,
-          origin: node.origin
-        });
-        this.levelRow++;
-        if (node?.children?.length) {
-          this.levelRow--;
-          obj.title = obj.title.split('').join('\n'); // 如果有子级则文字竖形排列
-          obj.width = treeTableminCellWidth;
-          obj.children = this.setTreeStyle(node.children, levelCol + 1, node);
-          obj.subSize = this.getChildrenSize(node.children);
-          obj.height = obj.subSize * treeTableminCellHeight;
-        } else {
-          obj.width = this.originX - obj.left;
-          obj.height = treeTableminCellHeight;
-          obj.lineList = JSON.parse(JSON.stringify(node.lineList));
-        }
-        arr.push(obj);
-      }
-      return arr;
-    },
-    getChildrenSize(list) {
-      let subSize = 0;
-      for (let i = 0; i < list.length; i++) {
-        if (list[i]?.children?.length) {
-          subSize += this.getChildrenSize(list[i].children);
-        } else {
-          subSize += 1;
-        }
-      }
-      return subSize;
-    },
-    toDataURL(option) {
-      return this.canvas.toDataURL(option);
-    },
-    renderCanvas() {
-      this.canvas.clear();
-      // this.canvas.renderCanvas();
-    }
-  },
-  destroyed() {
-    this.canvas.clear();
-    this.canvas.off();
-    this.canvas = null;
-    // this.canvas.dispose();
-  }
-};
-</script>
-
-<style></style>