cnhis-design-vue 0.2.63-beta → 0.3.1-beta

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

@@ -1,612 +0,0 @@
-<template>
-  <div class="poly-line">
-    <MouseRightClick v-if="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
-
-    <DropPopup v-if="isDropVisible" :val="dropVal" :dropPos="dropPos" />
-  </div>
-</template>
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import eventCommon from '../mixins/eventCommon';
-import MouseRightClick from '../components/MouseRightClick';
-import DropPopup from '../components/DropPopup';
-import defaultVaule from '../const/defaultVaule';
-
-const rightClickNode = [
-  { name: '新增节点', type: 'add' },
-  { name: '删除节点', type: 'delete' }
-];
-export default {
-  name: 'fabric-center2',
-  mixins: [fabricCommon, draw, eventCommon],
-  props: {
-    other: {
-      type: Object,
-      default: () => {}
-    },
-    polyline: {
-      type: Array,
-      required: true
-    }
-  },
-  components: {
-    MouseRightClick,
-    DropPopup
-  },
-  data() {
-    return {
-      polylineList: [],
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      isRightVisible: false,
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null, // 当前可右键活动的对象
-    };
-  },
-  watch: {
-    polyline: {
-      handler(value) {
-        if (value) {
-          this.repaintPolyline();
-        }
-      },
-      deep: true
-    },
-    polylineList(value) {
-      if (value) {
-        this.polylineList.forEach((polylineType, index) => {
-          this.createPolyline(polylineType, polylineType.type);
-        });
-      }
-    }
-  },
-  created() {},
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  computed: {
-    eventStyle() {
-      return this.propItems.eventStyle;
-    }
-  },
-  methods: {
-    init() {
-      this.drawOther(this.other);
-      this.eventStyle.evented && this.createEvent();
-      this.polylineList = JSON.parse(JSON.stringify(this.polyline));
-    },
-    getContainer() {
-      return this.$el;
-    },
-    createEvent() {
-      this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          const { x, y } = event.pointer;
-          const { originX, originY, endX, endY } = this.$propItems();
-          if (!(x < originX || x > endX || y < originY || y > endY)) {
-            this.activeEvent = event;
-            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-          }
-        }
-      });
-    },
-    createPolyline(polylineType, type) {
-      polylineType.dataList.forEach((item, index) => {
-        this.drawPolyline(item, index, polylineType, type);
-      });
-      const data = this.getShadowData(polylineType, type);
-      data?.length && this.drawShadow(data, polylineType.shadowStyle);
-    },
-    // 画出阴影线段
-    drawShadow(data, shadowStyle) {
-      const { canvasHeight } = this.propItems;
-      const lines = [];
-      data.forEach(v => {
-        const line1 = this.computeShadow(v.line1, shadowStyle.moveMode);
-        const line2 = this.computeShadow(v.line2, shadowStyle.moveMode);
-        const maxLine = line1.length >= line2.length ? line1 : line2;
-        const minLine = line1.length < line2.length ? line1 : line2;
-        // 如果存在两个数组长度不相等，则节点多的数组多余节点的阴影线段只存在节点多的线段组上，而没有与长度小的线段组相交
-        let i = 0;
-        maxLine.forEach((k, j) => {
-          if (minLine[j]) {
-            const line = this.drawLine([k.x, canvasHeight - k.y, minLine[j].x, canvasHeight - minLine[j].y], {
-              ...defaultVaule.style,
-              ...shadowStyle
-            });
-            lines.push(line);
-          } else {
-            if ( i % 2 === 0 && maxLine[j + 1]) {
-              const line = this.drawLine([k.x, canvasHeight - k.y, maxLine[j + 1].x, canvasHeight - maxLine[j + 1].y], {
-                ...defaultVaule.style,
-                ...shadowStyle
-              });
-              lines.push(line);
-            }
-            i++;
-          }
-        });
-      });
-      this.canvas.add(...lines);
-      this.canvas.renderAll();
-    },
-    /**
-     * @description: 计算阴影线段坐标数组
-     * @param {*} lineGroup
-     * @param {*} moveMode
-     * @return {*}
-     */    
-    computeShadow(lineGroup, moveMode) {
-      const { canvasWidth } = this.propItems;
-      // 结果坐标集合
-      let resultArr = [];
-      if (lineGroup.length < 2) return;
-      const beginPoint = lineGroup[0];
-      const endPoint = lineGroup[lineGroup.length - 1];
-      const b = beginPoint.y + beginPoint.x; // y = b - x;(斜率k的值为-1)
-      // const count = Math.round((endPoint.x - beginPoint.x) / moveMode);
-      const count = Math.round(canvasWidth / moveMode);
-      for (let i = 0; i < count; i++) {
-        for (let j = 0; j < lineGroup.length; j++) {
-          if (lineGroup[j + 1]) {
-            const point1 = lineGroup[j];
-            const point2 = lineGroup[j + 1];
-            const point11 = { x: 0, y: b + moveMode * i };
-            const point22 = { x: endPoint.x, y: b + moveMode * i - endPoint.x };
-            const intersectPoint = this.getIntersectPoint(point1, point2, point11, point22);
-            intersectPoint && resultArr.push(intersectPoint);
-          }
-        }
-      }
-      return resultArr;
-    },
-    // 获取两个线段相交的点的坐标，ab一个线段，cd一个线段
-    getIntersectPoint(a, b, c, d) {
-      // 三角形abc 面积的2倍
-      const area_abc = (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x);
-      // 三角形abd 面积的2倍
-      const area_abd = (a.x - d.x) * (b.y - d.y) - (a.y - d.y) * (b.x - d.x);
-      // 面积符号相同则两点在线段同侧,不相交 (对点在线段上的情况,本例当作不相交处理);
-      if (area_abc * area_abd >= 0) {
-        return false;
-      }
-      // 三角形cda 面积的2倍
-      const area_cda = (c.x - a.x) * (d.y - a.y) - (c.y - a.y) * (d.x - a.x);
-      // 三角形cdb 面积的2倍
-      // 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.
-      const area_cdb = area_cda + area_abc - area_abd;
-      if (area_cda * area_cdb >= 0) {
-        return false;
-      }
-      // 计算交点坐标
-      const t = area_cda / (area_abd - area_abc);
-      const dx = t * (b.x - a.x),
-        dy = t * (b.y - a.y);
-      return { x: a.x + dx, y: a.y + dy };
-    },
-    /**
-     * @description: 获取阴影部分所有点的数组
-     * @param {*} polylineType 折线数据，leftYScalevalue
-     * @param {*} type 类型，呼吸还是心率等
-     * @return {*} 返回一个数组，数组中每一个对象{line1, line2}即表示一块阴影，eg: [{line1, line2}, {line1, line2}]
-     */    
-    getShadowData(polylineType, type) {
-      // 说明，次方法待完善，存在阴影部分上下线段的节点个数不同的情况和时间不等值也不等的节点的情况（拖动节点后就会出现了。）
-      const { dataList } = polylineType;
-      const { canvasHeight } = this.propItems;
-      const data = [];
-      if (type === 'pulse' && dataList.length > 1) {
-        dataList.forEach((v, i) => {
-          if (i === 0) {
-            let line1 = [];
-            let line2 = [];
-            const list = v.list.flat();
-            const list2 = dataList[1].list.flat();
-            list.forEach((k, j) => {
-              if (k.time === list2[j].time && k.value !== list2[j].value) {
-                line1.push({
-                  x: this.cumputedX(k.time),
-                  y: canvasHeight - this.cumputedY(polylineType, k.value, type)
-                });
-                line2.push({
-                  x: this.cumputedX(k.time),
-                  y: canvasHeight - this.cumputedY(polylineType, list2[j].value, type)
-                });
-                if (list[j - 1] && line1.length === 1) {
-                  const obj = {
-                    x: this.cumputedX(list[j - 1].time),
-                    y: canvasHeight - this.cumputedY(polylineType, list[j - 1].value, type)
-                  };
-                  line1.unshift(obj);
-                  line2.unshift(obj);
-                }
-                if (list[j + 1] && list[j + 1].time === list2[j + 1].time && list[j + 1].value === list2[j + 1].value) {
-                  const obj = {
-                    x: this.cumputedX(list[j + 1].time),
-                    y: canvasHeight - this.cumputedY(polylineType, list[j + 1].value, type)
-                  };
-                  line1.push(obj);
-                  line2.push(obj);
-                }
-              } else {
-                line1.length && line2.length && data.push({ line1, line2 });
-                line1 = [];
-                line2 = [];
-              }
-            });
-          }
-        });
-      }
-      return data;
-    },
-    drawPolyline(polyline, polylineIndex, polylineType, type) {
-      const { pointAttr } = polyline;
-      this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
-      const list = polyline.list;
-      const pointList = [];
-      let lineList = [];
-      const otherList = [];
-      const otherAsyncList = [];
-      const { xScaleList, yCellHeight } = this.propItems;
-      const minTime = Math.min(...xScaleList);
-      const maxTime = Math.max(...xScaleList);
-      list.forEach((v, i) => {
-        // 当前点
-        let points = null;
-        if (v.time && v.value) {
-          const x = this.cumputedX(v.time);
-          const y = this.cumputedY(polylineType, v.value, type);
-          const time = new Date(v.time).getTime();
-          if (time >= minTime && time <= maxTime) points = [x, y];
-        }
-        // 下一个点
-        const nextPoints = list[i + 1];
-        let nextPoint = null;
-        if (nextPoints?.time && nextPoints?.value) {
-          const nextX = this.cumputedX(nextPoints.time);
-          const nextY = this.cumputedY(polylineType, nextPoints.value, type);
-          const nextTime = new Date(nextPoints.time).getTime();
-          if (nextTime > minTime && nextTime <= maxTime) nextPoint = [nextX, nextY];
-        }
-
-        const pointOthers = { type, polylineIndex: polylineIndex, pointIndex: i, ...pointAttr };
-
-        // 其他标志
-        let coolLine, coolPoint, noRiseText, arrowGroup, verifiedText;
-        if (points && type === 'centigrade') {
-          // 体温不升
-          if (v.noRise) {
-            const { noRiseStyle } = polyline;
-            // 文字形式
-            if (v.noRise.text) {
-              noRiseText = this.drawText(v.noRise.text.split('').join('\n'), points[0], points[1] + 5, { polylineIndex, pointIndex: i, originX: 'center', ...noRiseStyle });
-              otherList.push(noRiseText);
-            } else {
-              // 下箭头形式
-              const top = points[1] + yCellHeight * 2;
-              const arrowLine = this.drawLine([...points, points[0], top], { polylineIndex: polylineIndex, lineIndex: i, ...polyline.lineAttr, stroke: noRiseStyle.fill });
-              const arrow = this.drawText('v', points[0] + 0.5, top + 3, { polylineIndex, pointIndex: i, originX: 'center', originY: 'bottom', fontSize: 16, ...noRiseStyle }); // 加0.5会虚，不加箭头没有完全对称，top值同理
-              arrowGroup = new this.fabric.Group([arrowLine, arrow], { ...defaultVaule.style, originX: 'center', originY: 'top' });
-              otherList.push(arrowGroup);
-            }
-          }
-          // 体温已核实
-          if (v.verified) {
-            const { verifiedStyle } = polyline;
-            verifiedText = this.drawText('v', points[0], points[1] - 5, { polylineIndex, pointIndex: i, originX: 'center', originY: 'bottom', ...verifiedStyle });
-            otherList.push(verifiedText);
-          }
-          // 物理降温
-          if (v.cooling) {
-            const { coolingStyle } = polyline;
-            const coolingLineStyle = { ...polyline.lineAttr, stroke: coolingStyle.stroke, strokeDashArray: [3, 3] };
-            const coolY = this.cumputedY(polylineType, v.cooling, type);
-            coolLine = this.drawLine([...points, points[0], coolY], { polylineIndex: polylineIndex, lineIndex: i, ...coolingLineStyle });
-            const otherObj = Object.assign({}, pointOthers, coolingStyle, { isCooling: true });
-            const lineObj = { line1: coolLine, line2: null, line3: null, noRiseText, arrowGroup, verifiedText };
-            coolPoint = this.drawPoint(points[0], coolY, lineObj, 'circle', otherObj);
-            otherList.push(coolLine);
-            otherAsyncList.push(coolPoint);
-          }
-        }
-
-        let line;
-        let point;
-        let previousLine;
-
-        line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex: polylineIndex, lineIndex: i, ...polyline.lineAttr }) : null;
-
-        previousLine = lineList[i - 1];
-
-        if (previousLine) {
-          const lineObj = { line1: previousLine, line2: line, line3: coolLine, noRiseText, arrowGroup, verifiedText };
-          point = points && this.drawPoint(previousLine.get('x2'), previousLine.get('y2'), lineObj, polyline.type, pointOthers);
-        } else {
-          if (points) {
-            const lineObj = { line1: null, line2: line, line3: coolLine, noRiseText, arrowGroup, verifiedText };
-            point = this.drawPoint(...points, lineObj, polyline.type, pointOthers);
-          }
-        }
-        lineList.push(line);
-        point && pointList.push(point);
-      });
-
-      Promise.all(pointList).then(res => {
-        lineList = lineList.filter(v => v);
-        let prevPoint = null;
-        res = res.filter(v => {
-          if (v && prevPoint) {
-            prevPoint.nextPoint = v; // 记录下一个点 id
-            v.prevPoint = prevPoint;
-          }
-          prevPoint = v || prevPoint;
-          return v;
-        });
-
-        Promise.all(otherAsyncList).then(r => {
-          this.canvas.add(...lineList, ...res, ...otherList, ...r);
-          this.canvas.requestRenderAll();
-        });
-      });
-    },
-    /**
-     * 绘制折线点
-     * @param {left, top} 折线点坐标
-     * @param {lineObj} 与折线点关联的对象
-     * @param {type} 折线点类型
-     * @param {others} 参数 polylineIndex | pointIndex | ...polyline.pointAttr
-     */
-    async drawPoint(left, top, lineObj, type, others) {
-      const pointId = `${others.type}_${others.polylineIndex}_${others.pointIndex}_polylinePoint_${new Date().getTime()}`;
-      const ele = this._iconClassName && (await this.createImage(this._iconClassName, others));
-      let point = await this.createPoint(type, {
-        id: pointId,
-        left: left,
-        top: top,
-        ele: ele || '',
-        ...defaultVaule.pointStyle,
-        ...others,
-        ...this.propItems.eventStyle
-      });
-      point.hasControls = point.hasBorders = false;
-      lineObj.line1 && (point.line1 = lineObj.line1);
-      lineObj.line2 && (point.line2 = lineObj.line2);
-      lineObj.line3 && (point.line3 = lineObj.line3);
-      lineObj.noRiseText && (point.noRiseText = lineObj.noRiseText);
-      lineObj.arrowGroup && (point.arrowGroup = lineObj.arrowGroup);
-      lineObj.verifiedText && (point.verifiedText = lineObj.verifiedText);
-      point.on('mouseover', () => {
-        this.showDrapPopup(point);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-      // 折线点移动中 实时更新相关联的线的坐标
-      point.on('moving', () => {
-        this.pointMoveLimit(point);
-        this.pointMoveUpdateLine(point);
-        this.canvas.renderAll();
-        this.showDrapPopup(point);
-      });
-      // 折线点停止拖拽后 更新polylineList中对应的坐标
-      point.on('moved', () => {
-        if (point && point.id.includes('_polylinePoint_')) {
-          this.isDropVisible = false;
-          const data = this.getValue(point);
-          this.$emit('pointChange', data);
-        }
-      });
-      return point;
-    },
-    showDrapPopup(point) {
-      this.isDropVisible = true;
-      this.dropPos = {
-        left: point.left,
-        top: point.top
-      };
-      const { value, title } = this.getValue(point);
-      this.dropVal = {
-        title,
-        list: [
-          {id: '11', name: '时间', value: value.time},
-          {id: '22', name: '值', value: Math.round(value.value)},
-        ],
-      };
-    },
-    // 折线点移动时 setCoords()方法手动更新相关联的线坐标
-    pointMoveUpdateLine(point) {
-      if (point.line1) {
-        point.line1.setCoords();
-        point.line1.set({ x2: point.left, y2: point.top });
-      }
-      if (point.line2) {
-        point.line2.setCoords();
-        point.line2.set({ x1: point.left, y1: point.top });
-      }
-      if (point.line3) {
-        point.line3.setCoords();
-        point.line3.set({ x1: point.left, y1: point.top });
-      }
-      if (point.noRiseText) {
-        point.noRiseText.setCoords();
-        point.noRiseText.set({ left: point.left, top: point.top + 5 });
-      }
-      if (point.arrowGroup) {
-        point.arrowGroup.setCoords();
-        point.arrowGroup.set({ left: point.left, top: point.top });
-      }
-      if (point.verifiedText) {
-        point.verifiedText.setCoords();
-        point.verifiedText.set({ left: point.left, top: point.top - 5 });
-      }
-    },
-    drawLine(lines, others) {
-      const lineId = `${others.polylineIndex}_${others.pointIndex}_polylineLine_${new Date().getTime()}`;
-      const line = new this.fabric.Line(lines, {
-        id: lineId,
-        hoverCursor: 'pointer',
-        objectCaching: false,
-        selectable: false,
-        evented: false,
-        ...others
-      });
-
-      return line;
-    },
-    drawText(value, left, top, others) {
-      const id = `${others.polylineIndex}_${others.pointIndex}_polylineText_${new Date().getTime()}`;
-      const text = new this.fabric.Text(String(value), {
-        id,
-        originX: others.originX || 'left',
-        originY: others.originY || 'top',
-        left,
-        top,
-        ...defaultVaule.style,
-        ...defaultVaule.textStyle,
-        ...others
-      });
-      return text;
-    },
-    cumputedX(value) {
-      const { xScaleList, xScaleCell, originX, xCellWidth } = this.propItems;
-      const time = new Date(value).getTime();
-      const minScale = Math.min(...xScaleList);
-      const i = Math.floor((time - minScale) / xScaleCell);
-      return originX + xCellWidth * i + xCellWidth / 2;
-    },
-    cumputedY(polylineType, value, type) {
-      const yScaleCell = this.propItems[`${type}YCell`];
-      const yCellUnit = value - Math.min(...polylineType.list);
-      return this.propItems.endY - yScaleCell * yCellUnit;
-    },
-    getXValue(left) {
-      const { xScaleList, xScaleCell, xCellWidth, originX } = this.propItems;
-      const minScale = Math.min(...xScaleList);
-      const time = minScale + ((left - originX) / xCellWidth) * xScaleCell;
-      let d = new Date(time);
-      const month = `00${d.getMonth() + 1}`.slice(-2);
-      const day = `00${d.getDate()}`.slice(-2);
-      const date = `${d.getFullYear()}-${month}-${day} ${d.getHours()}:00`;
-      return date;
-    },
-    getYValue(type, top) {
-      const yScaleCell = this.propItems[`${type}YCell`];
-      const list = this.polyline.find(v => v.type === type)?.list || [];
-      const minVal = list.length ? Math.min(...list) : 0;
-      const y = (this.propItems.endY - top) / yScaleCell + minVal;
-      return y;
-    },
-    getValue(point) {
-      if (point.id) {
-        const { polylineIndex, pointIndex, type, left, top } = point;
-        const data = this.polylineList.find(v => v.type === type);
-        const title = data?.dataList?.[polylineIndex]?.title || '';
-        // const obj = this.getListIndexValue(data?.dataList?.[polylineIndex]?.list, pointIndex);
-        const obj = {
-          data: data?.dataList?.[polylineIndex]?.list?.[pointIndex]?.data || '',
-          value: {}
-        };
-        obj.value.time = this.getXValue(left);
-        obj.value.value = this.getYValue(type, top);
-        return {
-          title,
-          type,
-          dataIndex: polylineIndex,
-          pointIndex,
-          ...obj
-        };
-      } else {
-        const x = this.getXValue(point.left);
-        const valueList = this.polylineList.map(v => ({ type: v.type, value: this.getYValue(v.type, point.top) }));
-        return { x, valueList };
-      }
-    },
-    drawOther(other) {
-      const { originY } = this.propItems;
-      if (!other || !other.list) return false;
-      const list = [];
-      // 数据列表
-      other.list.forEach(arr => {
-        arr.dataList.forEach((v, i) => {
-          const text = new this.fabric.Text(String(v[1].split('').join('\n')), {
-            originX: 'center',
-            top: originY,
-            left: this.cumputedX(v[0]),
-            textAlign: 'center',
-            ...defaultVaule.style,
-            ...arr.style
-          });
-          list.push(text);
-        });
-      });
-      const group = list.length > 0 ? new this.fabric.Group([...list], { ...defaultVaule.style }) : null;
-      group && group.sendToBack(); // 向下跳底层
-      group && this.canvas.add(group);
-      this.canvas.renderAll();
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type }) {
-      this.isRightVisible = false;
-      const point = this._currentPoint;
-      this._currentPoint = '';
-      const { left, top } = this._active;
-      let data = point ? this.getValue(point) : this.getValue({ left, top });
-      this.$emit('pointOperation', type, data);
-    },
-    // 打开右键菜单
-    openRightModal(event) {
-      if (!this.propItems.eventStyle.evented) {
-        return;
-      }
-      this.rightPos = {
-        clientX: event.e.clientX || event.e.pageX,
-        clientY: event.e.clientY || event.e.pageY
-      };
-      this.isRightVisible = false;
-      const target = event.target;
-      const id = target ? target.id : '';
-      const nextId = target ? target.nextId : '';
-      this.$nextTick(() => {
-        if (id && id.includes('_polylinePoint_')) {
-          this._currentPoint = target;
-          this.rightClickNode = Object.freeze(rightClickNode.slice());
-        } else {
-          this._currentPoint = '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice(0, 1));
-        }
-        this.isRightVisible = true;
-      });
-    },
-    removePolyline(id) {
-      if (id) {
-        const point = this.canvas.getObjects().find(item => item.id === id);
-        if (point) {
-          this.canvas.remove(point);
-          point.line1 && this.canvas.remove(point.line1);
-          point.line3 && this.canvas.remove(point.line3);
-          point.noRiseText && this.canvas.remove(point.noRiseText);
-          point.arrowGroup && this.canvas.remove(point.arrowGroup);
-          point.verifiedText && this.canvas.remove(point.verifiedText);
-        }
-        return;
-      }
-      this.canvas.forEachObject(obj => {
-        if (obj.id && /_polyline(Point|Line|Text)_/.test(obj.id)) {
-          this.canvas.remove(obj);
-        }
-      });
-    },
-    repaintPolyline() {
-      if (this.polylineList.length) {
-        this.removePolyline();
-      }
-      this.polylineList = JSON.parse(JSON.stringify(this.polyline));
-    }
-  },
-};
-</script>