cnhis-design-vue 2.2.3 → 2.2.6

package/packages/fabric-chart/src/mixins/draw.js

@@ -1,444 +0,0 @@
-import { isNumber, isObject, getTangent, getIntersectionPoint, sortPoints, isInPolygon, uniquePoints } from '../utils';
-
-export default {
-  name: 'draw',
-  data() {
-    return {
-      defaultLineStyle: {
-        stroke: '#000',
-        strokeWidth: 1,
-        strokeDashArray: [0, 0],
-        evented: false,
-        selectable: false
-      },
-      defaultRectStyle: {
-        fill: 'transparent',
-        stroke: '#999',
-        strokeWidth: 1,
-        originX: 'center',
-        originY: 'center'
-      },
-      defaultTextStyle: {
-        fontFamily: '微软雅黑',
-        fontSize: 12,
-        fill: '#000',
-        centeredRotation: true,
-        originX: 'center',
-        originY: 'center',
-        lineHeight: 1,
-        objectCaching: false
-      },
-      defaultGroupStyle: {
-        objectCaching: false,
-        evented: false,
-        selectable: false
-      }
-    };
-  },
-  components: {},
-  methods: {
-    // 绘制线
-    drawLine(points, style) {
-      if (!Array.isArray(points)) return null; // 坐标点非数组
-      if (points.length < 4) return null; // 坐标点位数不足 无法完成线的绘制
-      if (points.filter(point => isNumber(point)).length < 4) return null; // 坐标点内可用数值不足 无法完成线的绘制
-      return new this.fabric.Line(points, {
-        ...this.defaultLineStyle,
-        ...style
-      });
-    },
-    // 绘制文本区
-    drawTextGroup(rectStyle, fontStyle, groupStyle) {
-      const rect_style = this.isObject(rectStyle)
-        ? {
-            ...rectStyle
-          }
-        : {};
-      const font_style = this.isObject(fontStyle)
-        ? {
-            ...fontStyle
-          }
-        : {};
-      const group_style = this.isObject(groupStyle)
-        ? {
-            ...groupStyle
-          }
-        : {
-            left: 0,
-            top: 0
-          };
-      if (!this.isNumber(rect_style.width) || !this.isNumber(rect_style.height)) return null; // rect容器宽高必须全部是可用数字类型 否则无法画出正确的容器
-
-      !this.isNumber(group_style.left) && (group_style.left = 0);
-      !this.isNumber(group_style.top) && (group_style.top = 0);
-
-      font_style.originY = font_style.originY === 'top' ? 'bottom' : font_style.originY === 'bottom' ? 'top' : 'center';
-      font_style.originX = font_style.originX === 'left' ? 'right' : font_style.originX === 'right' ? 'left' : 'center';
-
-      const rect = new this.fabric.Rect({
-        ...this.defaultRectStyle,
-        ...rect_style
-      });
-      const texts = new this.fabric.Text(font_style.text, {
-        ...this.defaultTextStyle,
-        ...font_style
-      });
-      return new this.fabric.Group([rect, texts], {
-        ...this.defaultGroupStyle,
-        ...group_style
-      });
-    },
-    isNumber(num) {
-      return isNumber(num);
-    },
-    isObject(obj) {
-      return isObject(obj);
-    },
-    /**
-     * @description: 根据svg生成image Dom对象
-     * @param n*o iconClassName
-     * @param n*o others
-     * @return n*o
-     */
-    createImage(iconClassName, others) {
-      // 第一个参数是SVG字符串，第二个参数是回调函数
-      // fabric.loadSVGFromString('...', function(objects, options) {
-      //   var obj = fabric.util.groupSVGElements(objects, options);
-      //   canvas.add(obj).renderAll();
-      // });
-      // fabric.loadSVGFromURL的工作方式相同，只不过您传递的是包含URL而不是SVG内容的字符串
-      return new Promise((resolve, reject) => {
-        const svg = document?.querySelector(iconClassName)?.querySelector('svg');
-        if (!svg) reject('图片转换svg失败！');
-        svg.setAttribute('version', 1.1);
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svg.style.color = others.color || '#000';
-        svg.style.fontSize = others.fontSize || '14px';
-        const str = svg.parentNode.innerHTML;
-        const src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(str)));
-        const img = document.createElement('img');
-        img.setAttribute('src', src);
-        img.onload = () => {
-          resolve(img);
-        };
-      });
-    },
-    // 画出+
-    createAdd(data) {
-      const width = data.width || 10;
-      const height = data.height || 10;
-      const line1 = new this.fabric.Line([0, height / 2, width, height / 2], {
-        ...data,
-        angle: 0
-      });
-      const line2 = new this.fabric.Line([width / 2, 0, width / 2, height], {
-        ...data,
-        angle: 0
-      });
-      return new this.fabric.Group([line1, line2], {
-        scale: 1,
-        ...data
-      });
-    },
-    // 画出圆边框
-    createCircleBorder(data) {
-      return new this.fabric.Circle({
-        objectCaching: false,
-        strokeWidth: 1,
-        radius: data.width ? data.width / 2 : data.radius,
-        scale: 1,
-        fill: '#fff',
-        ...data
-      });
-    },
-    // 画出v
-    createArrow(data) {
-      const width = data.width || 10;
-      const height = data.height || 10;
-      return new this.fabric.Polyline(
-        [
-          { x: 0, y: 0 },
-          { x: width / 2, y: height },
-          { x: width, y: 0 }
-        ],
-        {
-          scale: 1,
-          ...data
-        }
-      );
-    },
-    // 机械通气
-    createJXTQ(data) {
-      const width = data.width || 25;
-      const height = data.height || 10;
-      return new this.fabric.Polyline(
-        [
-          { x: 0, y: height },
-          { x: width / 5, y: 0 },
-          { x: (width / 5) * 2, y: height },
-          { x: (width / 5) * 3, y: 0 },
-          { x: (width / 5) * 4, y: height },
-          { x: (width / 5) * 5, y: 0 }
-        ],
-        {
-          scale: 1,
-          ...data
-        }
-      );
-    },
-    ceateLineArrow(data) {
-      const line = new this.fabric.Line([data.left, data.top, data.left + data.width, data.top], {
-        stroke: data.stroke,
-        strokeWidth: data.strokeWidth
-      });
-      const arrow = this.createArrow({
-        fill: 'transparent',
-        width: data.arrowwidth || 3,
-        height: data.arrowheight || 3,
-        stroke: data.stroke,
-        originX: 'center',
-        originY: 'center',
-        left: data.left + data.width - data.arrowwidth + 1,
-        top: data.top,
-        angle: 270
-      });
-      return new this.fabric.Group([line, arrow], {
-        scale: 1,
-        ...data
-      });
-    },
-    async createPoint(type, data) {
-      // 移除type值避免调用clone方法时，fabricjs中 var klass = fabric.util.getKlass(o.type, namespace); klass.fromObject 这会报错找不到fromObject属性
-      Reflect.deleteProperty(data, 'type');
-      data.hoverCursor = 'pointer';
-      const commonOption = {
-        scale: 1,
-        ...data
-      };
-
-      let obj1, obj2;
-      switch (type) {
-        case 'rect':
-          // 矩形
-          return new this.fabric.Rect({
-            width: 8,
-            height: 8,
-            strokeWidth: 1,
-            ...commonOption
-          });
-        case 'triangle':
-          // 三角形
-          return new this.fabric.Triangle({
-            width: 20,
-            height: 20,
-            strokeWidth: 1,
-            ...commonOption
-          });
-        case 'circle':
-          return new this.fabric.Circle({
-            objectCaching: false,
-            strokeWidth: 1,
-            radius: 5,
-            ...commonOption
-          });
-        case 'img':
-          // 图片
-          return await new Promise((resolve, reject) => {
-            const common = {
-              originX: 'center',
-              originY: 'center',
-              ...data
-            };
-            if (data.url) {
-              this.fabric.Image.fromURL(data.url, function(img) {
-                const { width, height } = img;
-                img.set({
-                  ...common,
-                  scaleX: (data.width || width) / width,
-                  scaleY: (data.height || height) / height,
-                  width: width || data.width,
-                  height: height || data.height,
-                  scale: (data.width || width) / width
-                });
-                resolve(img);
-              });
-            } else {
-              delete common.stroke;
-              const img = new this.fabric.Image(data.ele, {
-                ...common,
-                scale: 1
-              });
-              resolve(img);
-            }
-          });
-        case 'arrow':
-          return this.createArrow(data);
-        case '+':
-          return this.createAdd(data);
-        case 'shjs':
-          obj1 = this.createAdd(data);
-          obj2 = this.createCircleBorder(data);
-          return new this.fabric.Group([obj2, obj1], {
-            ...commonOption,
-            angle: 0
-          });
-        case 'shks':
-          obj1 = new this.fabric.Circle({
-            objectCaching: false,
-            radius: data.width / 5,
-            fill: data.stroke || '#000',
-            originX: 'center',
-            originY: 'center',
-            left: data.left,
-            top: data.top
-          });
-          obj2 = this.createCircleBorder(data);
-          return new this.fabric.Group([obj2, obj1], commonOption);
-        case 'circleAndText':
-          obj1 = new this.fabric.Text(String(data.text), {
-            fontFamily: '微软雅黑',
-            fontSize: 12,
-            originX: 'center',
-            originY: 'center',
-            fill: data.stroke,
-            left: data.left,
-            top: data.top - 1,
-            objectCaching: false
-          });
-          obj2 = this.createCircleBorder(data);
-          return new this.fabric.Group([obj2, obj1], commonOption);
-        case 'qgcg': {
-          const { width, height } = data;
-          obj1 = new this.fabric.Line([0, height / 2, width, height / 2], {
-            strokeWidth: 1,
-            ...data
-          });
-          obj2 = this.createCircleBorder({ ...data, width: width / 2 });
-          return new this.fabric.Group([obj2, obj1], commonOption);
-        }
-        case 'zrhz': {
-          const { width, height } = data;
-          obj1 = new this.fabric.Line([0, height / 2, width, height / 2], {
-            strokeWidth: 1,
-            ...data
-          });
-          obj2 = this.createCircleBorder({ ...data, width: width / 2 });
-          const obj3 = this.createCircleBorder({ ...data, width: width / 3 });
-          return new this.fabric.Group([obj2, obj3, obj1], commonOption);
-        }
-        case 'cg':
-          obj1 = this.ceateLineArrow(data);
-          obj2 = this.createCircleBorder(data);
-          return new this.fabric.Group([obj2, obj1], commonOption);
-        case 'jxtq':
-          return this.createJXTQ(data);
-        default:
-          // 文字(默认:比如 type === x)
-          data.stroke && delete data.stroke;
-          return new this.fabric.Text(String(type), {
-            fontFamily: '微软雅黑',
-            scale: 1,
-            fontSize: 14,
-            fill: '#000',
-            ...data
-          });
-      }
-    },
-    drawShadow(coordinates, angle = 45, space = 10, style = {}) {
-      const result = [];
-      const that = this;
-      // 去除无用角度
-      angle = normalizeAngle(angle);
-      // if (angle === 0) return result;
-
-      const minX = Math.min(...coordinates.map(([x]) => x));
-      const maxX = Math.max(...coordinates.map(([x]) => x));
-      const minY = Math.min(...coordinates.map(([, y]) => y));
-      const maxY = Math.max(...coordinates.map(([, y]) => y));
-
-      if (angle === 0) {
-        // 绘制水平线
-        let start = minY,
-          end = maxY;
-        while (start < end - 1) {
-          start += space;
-          result.push(createLine([minX, start], [maxX, start]));
-        }
-        return result;
-      }
-
-      const offsetX = (maxY - minY) / getTangent(angle);
-
-      const isLeanRight = (angle > 0 && angle < 90) || (angle > 180 && angle < 270);
-
-      let start = minX;
-      let end = maxX;
-
-      if (isLeanRight) {
-        end += offsetX;
-      } else {
-        start += offsetX;
-      }
-
-      getLinePoints(start, end).forEach(linePoint => {
-        let intersectionPoints = [];
-        getShapeLinePoints(coordinates).forEach(shapeLinePoint => {
-          const intersectionPoint = getIntersectionPoint(linePoint[0], linePoint[1], shapeLinePoint[0], shapeLinePoint[1]);
-          intersectionPoint && intersectionPoints.push(intersectionPoint);
-        });
-        intersectionPoints = sortPoints(uniquePoints(intersectionPoints));
-        if (intersectionPoints.length >= 2) {
-          for (let i = 0; i < intersectionPoints.length; i++) {
-            if (intersectionPoints[i + 1] && isInnerLine(intersectionPoints[i], intersectionPoints[i + 1])) {
-              result.push(createLine(intersectionPoints[i], intersectionPoints[i + 1]));
-            }
-            // i++;
-          }
-        }
-      });
-      return result;
-
-      // 是否是外侧阴影
-      function isInnerLine(point1, point2) {
-        return isInPolygon([(point1[0] + point2[0]) / 2, (point1[1] + point2[1]) / 2], coordinates);
-      }
-
-      function normalizeAngle(angle) {
-        // 去除无用角度
-        angle = angle % 360;
-        // 负角度
-        angle = angle < 0 ? 180 - angle : angle;
-        // 大角度
-        angle = angle >= 180 ? angle - 180 : angle;
-        return angle;
-      }
-
-      function getLinePoints(start, end) {
-        const result = [completePoint([start, minY])];
-
-        while (start < end) {
-          start += space;
-          result.push(completePoint([start, minY]));
-        }
-        return result;
-      }
-
-      function completePoint(point) {
-        const otherPoint = [point[0] - offsetX, maxY];
-        return [point, otherPoint];
-      }
-
-      function getShapeLinePoints(coordinates) {
-        return coordinates.reduce((res, c, idx) => {
-          const next = coordinates[idx + 1] || coordinates[0];
-          res.push([c, next]);
-          return res;
-        }, []);
-      }
-
-      function createLine(startPoint, endPoint) {
-        return new that.fabric.Line([startPoint[0], startPoint[1], endPoint[0], endPoint[1]], { ...that.defaultLineStyle, ...style });
-      }
-    }
-  }
-};

package/packages/fabric-chart/src/mixins/drawExtracorporealCirculation.js

@@ -1,222 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep';
-import vexutils, { moment } from '@/utils/vexutils';
-
-export default {
-  name: 'drawExtracorporealCirculation',
-  data() {
-    this.extracorporealCirculation = cloneDeep(this.templateData.bottom?.extracorporealCirculation);
-    this.extracorporealCirculationObjs = [];
-    this.extracorporealCirculationHeight = 0;
-    return {};
-  },
-  components: {},
-  methods: {
-    updateExtracorporealCirculation() {
-      this.extracorporealCirculation = cloneDeep(this.templateData.bottom?.extracorporealCirculation);
-      this.drawExtracorporealCirculation();
-    },
-    drawExtracorporealCirculation() {
-      const { endX, originX, endY, markHeight, canvasWidth } = this.propItems;
-      const extracorporealCirculation = this.extracorporealCirculation;
-      if (!markHeight || !extracorporealCirculation || !extracorporealCirculation.list?.length) {
-        return;
-      }
-      if (this.extracorporealCirculationObjs.length) {
-        [...this.extracorporealCirculationObjs].forEach(obj => this.canvas.remove(obj));
-        this.extracorporealCirculationObjs = [];
-      }
-
-      const { height = 20, extracorporealCirculationStyle, ascendAortaStyle, list = [] } = extracorporealCirculation;
-      const y2 = endY + height;
-
-      let prevEndX;
-      let prevLine;
-
-      list.forEach((item, index) => {
-        const xList = this.getExtracorporealCirculationX(item);
-        const idx = xList.findIndex(x => x > 0 && x < canvasWidth);
-        if (idx === -1) return;
-
-        let prevShadowBox;
-        xList.forEach((x, i) => {
-          if (isInvalid(x)) return;
-
-          const nextX = xList[i + 1];
-          const prevX = xList[i - 1];
-          if (isValid(x) || isValid(nextX)) {
-            const x1 = isValid(x) ? x : originX;
-            const x2 = isValid(nextX) ? nextX : isInvalid(nextX) ? null : endX;
-            const prevX1 = isValid(prevX) ? prevX : originX;
-            const shadowBox = {};
-            if (i < xList.length - 1 && x2) {
-              shadowBox.params = [x1, x2, y2, [0, 2].includes(i) ? extracorporealCirculationStyle : ascendAortaStyle];
-              shadowBox.shadowObjs = this.drawShadowBox(...shadowBox.params);
-            }
-            if (isValid(x)) {
-              const key = getKey(i);
-              const currentTime = moment()
-                .clone()
-                .format('YYYY-MM-DD HH:mm');
-              const currentTimeX = this.computedX(currentTime);
-              const limitX2 = x < currentTimeX && isValid(currentTimeX) ? currentTimeX : x;
-              const optLine = this.drawOptLine([x, endY, x, y2], {
-                origin: {
-                  index,
-                  key,
-                  data: item[key]
-                },
-                limitX: {
-                  x1: i === 0 ? prevEndX ?? originX : prevX1,
-                  x2: x2 || limitX2,
-                  isCurrentTime: !x2 && index === list.length - 1
-                },
-                ...([1, 2, 3].includes(i) ? { leftShadowBox: prevShadowBox } : {}),
-                ...([0, 1, 2].includes(i) ? { rightShadowBox: shadowBox } : {})
-              });
-              if (i === xList.length - 1) {
-                prevEndX = x;
-                prevLine = optLine;
-              }
-              if (i === 0 && prevLine) {
-                prevLine.limitX.x2 = x1;
-              }
-            }
-            prevShadowBox = shadowBox;
-          }
-        });
-      });
-
-      if (this.extracorporealCirculationObjs.length) {
-        this.extracorporealCirculationHeight = height;
-      }
-
-      function isValid(x) {
-        return x && x > 0 && x < canvasWidth;
-      }
-      function isInvalid(x) {
-        return typeof x === 'undefined' || x === '';
-      }
-      function getKey(i) {
-        switch (i) {
-          case 0:
-            return 'extracorporealCirculationStart';
-          case 1:
-            return 'closeAscendAorta';
-          case 2:
-            return 'openAscendAorta';
-          case 3:
-            return 'extracorporealCirculationEnd';
-        }
-      }
-    },
-    drawOptLine(coordinate, props) {
-      const optLine = new this.fabric.Line(coordinate, {
-        ...props,
-        stroke: 'transparent',
-        strokeWidth: 5,
-        hasControls: false,
-        hasBorders: false,
-        hoverCursor: 'e-resize',
-        lockMovementY: true,
-        originX: 'center'
-      });
-      this.setExtracorporealCirculationEvent(optLine);
-      this.canvas.add(optLine);
-      this.extracorporealCirculationObjs.push(optLine);
-      return optLine;
-    },
-    setExtracorporealCirculationEvent(optLine) {
-      this.setPopup(optLine);
-      if (this.eventStyle.evented) {
-        optLine.on('moving', () => {
-          const { left, limitX } = optLine;
-          const { canvasWidth } = this.propItems;
-          const currentTime = moment()
-            .clone()
-            .format('YYYY-MM-DD HH:mm');
-          const currentTimeX = this.computedX(currentTime);
-          if (limitX.isCurrentTime && limitX.x2 < currentTimeX && currentTimeX > 0 && currentTimeX < canvasWidth) {
-            limitX.x2 = currentTimeX;
-          }
-          if (left < limitX.x1) {
-            optLine.setCoords().set({ x1: limitX.x1, x2: limitX.x1 });
-          }
-          if (left > limitX.x2) {
-            optLine.setCoords().set({ x1: limitX.x2, x2: limitX.x2 });
-          }
-          this.updateShadowBox(optLine, 'left');
-          this.updateShadowBox(optLine, 'right');
-          this.showDrapPopup(optLine);
-        });
-        optLine.on('moved', () => {
-          this.isDropVisible = false;
-          const params = optLine.origin;
-          params.data.time = this.getXValue(optLine.left);
-          this.$emit('extracorporealCirculationChange', params);
-          const { index, key, data } = params;
-          this.extracorporealCirculation.list[index][key] = data;
-          this.drawExtracorporealCirculation();
-          this.canvas.discardActiveObject();
-          this.markObjs.forEach(obj => obj.bringForward());
-        });
-      }
-    },
-    updateShadowBox(optLine, direction) {
-      const { shadowObjs, params } = optLine[`${direction}ShadowBox`] || {};
-      if (!shadowObjs || !params) return;
-      shadowObjs.forEach(obj => this.canvas.remove(obj));
-      const idx = direction === 'left' ? 1 : 0;
-      params[idx] = optLine.left;
-      const _shadowObjs = this.drawShadowBox(...params);
-      optLine[`${direction}ShadowBox`] = {
-        shadowObjs: _shadowObjs,
-        params
-      };
-    },
-    drawShadowBox(x1, x2, y2, { mode, style }) {
-      const { endY } = this.propItems;
-      const _style = { ...style };
-      if (_style.angle) delete _style.angle;
-      const points = [
-        [x1, endY],
-        [x2, endY],
-        [x2, y2],
-        [x1, y2]
-      ];
-      const polygon = new this.fabric.Polygon(
-        points.map(v => ({ x: v[0], y: v[1] })),
-        {
-          ...this.defaultLineStyle,
-          ..._style,
-          stroke: 'transparent',
-          ...(['slash'].includes(mode) ? { fill: 'transparent' } : {})
-        }
-      );
-      const shadowLines = [];
-      if (['slash'].includes(mode)) {
-        // 斜线阴影模式
-        shadowLines.push(...this.drawShadow(points, style.angle, _style.space, _style));
-      }
-      this.canvas.add(polygon, ...shadowLines);
-      this.extracorporealCirculationObjs.push(...[polygon, ...shadowLines]);
-      return [polygon, ...shadowLines];
-    },
-    getExtracorporealCirculationX(item) {
-      const { extracorporealCirculationStart, closeAscendAorta, openAscendAorta, extracorporealCirculationEnd } = item;
-      let x1, x2, x3, x4;
-      if (extracorporealCirculationStart) {
-        x1 = this.computedX(extracorporealCirculationStart.time);
-      }
-      if (closeAscendAorta) {
-        x2 = this.computedX(closeAscendAorta.time);
-      }
-      if (openAscendAorta) {
-        x3 = this.computedX(openAscendAorta.time);
-      }
-      if (extracorporealCirculationEnd) {
-        x4 = this.computedX(extracorporealCirculationEnd.time);
-      }
-      return [x1, x2, x3, x4];
-    }
-  }
-};