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

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

@@ -1,120 +0,0 @@
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import defaultVaule from '../const/defaultVaule';
-
-export default {
-  name: 'fabric-scale-value',
-  mixins: [fabricCommon],
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-    };
-  },
-  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;
-        textList.push(this.createText(cur.slice(-5), originX + i * spaceGridNumber * xCellWidth, top, 'center', newStyle));
-        return cur;
-      }, '');
-      const group = new this.fabric.Group([...textList], {
-        evented: false,
-        selectable: false
-      });
-      this.canvas.add(group);
-      this.canvas.sendBackwards(group);
-    },
-    rightScaleValue(obj) {
-      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 spaceGridNumber = obj.leftYScalevalue.spaceGridNumber || 2;
-      const marginRight = obj.leftYScalevalue.marginRight || 3;
-      const style = obj.leftYScalevalue.style || {};
-      const originX = this.propItems.originX - marginRight;
-      let textList = [];
-      obj.leftYScalevalue.list.forEach((item, index) => {
-        textList.push(this.createText(item, originX, this.propItems.endY - index * this.propItems.yCellHeight * spaceGridNumber, 'right', style));
-      });
-
-      // 添加标题和单位
-      let txt = '';
-      txt = obj.leftYScalevalue.name || '';
-      if (obj.leftYScalevalue.unit) txt += '\n' + obj.leftYScalevalue.unit;
-      if (txt) {
-        const top = this.propItems.endY - obj.leftYScalevalue.list.length * this.propItems.yCellHeight * spaceGridNumber;
-        textList.push(this.createText(txt, originX, 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
-      });
-    }
-  },
-  render(h) {
-    return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  }
-};
-</script>

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

@@ -1,526 +0,0 @@
-<template>
-  <div class="text-group">
-    <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 defaultVaule from '../const/defaultVaule';
-import DropPopup from '../components/DropPopup';
-import MouseRightClick from '../components/MouseRightClick';
-import eventCommon from '../mixins/eventCommon';
-
-const rightClickNode = [
-  { name: '修改', type: 'edit' },
-  { name: '删除', type: 'delete' }
-];
-
-let topTotalList = [];
-const getTopTotalList = (tree, topTotalList) => {
-  tree.forEach(item => {
-    if (item?.children?.length) {
-      getTopTotalList(item.children, topTotalList);
-    } else {
-      const obj = JSON.parse(JSON.stringify(item));
-      topTotalList.push(obj?.total || '');
-    }
-  });
-};
-
-export default {
-  name: 'fabric-text-group',
-  components: {
-    DropPopup,
-    MouseRightClick
-  },
-  mixins: [fabricCommon, draw, eventCommon],
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    },
-  },
-  watch: {
-    'templateData.other': {
-      handler(value) {
-        if (value) {
-          this.removeOther();
-          this.drawTextDataGroup(value);
-          this.canvas.renderAll();
-        }
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      leftStartX: 0,
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      isRightVisible: false,
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null // 当前可右键活动的对象
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  computed: {
-    girdLineStyle() {
-      return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
-    },
-    eventStyle() {
-      return this.propItems.eventStyle;
-    }
-  },
-  methods: {
-    init() {
-      if (this.propItems.treeList?.length) {
-        this.topTreeTextGroup(this.propItems.treeList);
-        if (this.propItems.topTotal?.width) {
-          topTotalList = [];
-          getTopTotalList(this.templateData.top.list, topTotalList);
-          this.drawTopTotal(topTotalList);
-        }
-      }
-      this.templateData.left && this.drawLeftScaleGroup(this.templateData.left);
-      this.templateData.other && this.drawTextDataGroup(this.templateData.other);
-      this.templateData.bottom && this.drawBottomTextDataGroup(this.templateData.bottom);
-      this.eventStyle.evented && this.createEvent();
-
-      this.drawBorder();
-      this.canvas.renderAll();
-    },
-    drawBorder() {
-      const { endX, canvasWidth, canvasHeight, topTotal } = this.propItems;
-      const curEndX = topTotal.width ? canvasWidth : endX;
-      // 右 下两条线宽度和高度顶格不显示未发现具体原因 暂时减一处理
-      // 上边线
-      this.canvas.add(this.drawLine([0, 0, curEndX, 0], { ...this.girdLineStyle }));
-      // 右边线
-      this.canvas.add(this.drawLine([topTotal.width ? curEndX - 1 : curEndX, 0, topTotal.width ? curEndX - 1 : curEndX, canvasHeight], { ...this.girdLineStyle }));
-      // 下边线
-      this.canvas.add(this.drawLine([0, canvasHeight - 1, curEndX, canvasHeight - 1], { ...this.girdLineStyle }));
-      // 左侧边框线
-      this.canvas.add(this.drawLine([0, 0, 0, canvasHeight], { ...this.girdLineStyle }));
-    },
-    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);
-          }
-        }
-      });
-    },
-    // 打开右键菜单
-    openRightModal(event) {
-      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 : '';
-      this.$nextTick(() => {
-        if (id && id.includes('_other')) {
-          this._currentPoint = target || '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice());
-          this.isRightVisible = true;
-        }
-      });
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type }) {
-      this.isRightVisible = false;
-      const text = this._currentPoint;
-      this._currentPoint = '';
-      const obj = {
-        type: text.type,
-        index: text.index,
-        dataIndex: text.dataIndex
-      };
-      this.$emit(`${type}Other`, obj);
-    },
-    removeOther() {
-      this.canvas.forEachObject(obj => {
-        if (obj.id && obj.id.includes('_other')) {
-          this.canvas.remove(obj);
-        }
-      });
-    },
-    drawTopTotal(topTotalList) {
-      const { endX, canvasWidth, yCellHeightTop, topTotal, endYTop, spaceHeight } = this.propItems;
-      const textList = [];
-      const left = endX + (canvasWidth - endX) / 2;
-      topTotalList.forEach((v, i) => {
-        const top = i * yCellHeightTop + yCellHeightTop / 2;
-        const text = v
-          ? new this.fabric.Text(String(v), {
-              ...defaultVaule.style,
-              ...(topTotal.style || defaultVaule.textStyle),
-              left,
-              top,
-              originX: 'center',
-              originY: 'center'
-            })
-          : null;
-        text && textList.push(text);
-      });
-      const title = this.drawTextGroup(
-        { width: canvasWidth - endX, height: spaceHeight, strokeWidth: 1 },
-        { text: String(topTotal.title), ...(topTotal.style || defaultVaule.textStyle) },
-        { left: endX, top: endYTop }
-      );
-      this.canvas.add(...textList, title);
-    },
-    topTreeTextGroup(list) {
-      list.forEach(item => {
-        if (item?.children?.length) {
-          this.canvas.add(
-            this.drawTextGroup(
-              { width: item.width, height: item.height, strokeWidth: 1 },
-              { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {}) },
-              { left: item.left, top: item.top }
-            )
-          );
-          this.topTreeTextGroup(item.children);
-        } else {
-          // 此处的文本text的中心源的定位由于draw.js中封装反向的，所以此时文本需要向左排列originX值应为right
-          this.canvas.add(
-            this.drawTextGroup(
-              { width: item.width, height: item.height, strokeWidth: 1 },
-              { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {}), originX: 'right', left: -Math.floor(item.width / 2) + 5 },
-              { left: item.left, top: item.top }
-            )
-          );
-        }
-      });
-    },
-
-    // 绘制x轴下方的数据
-    drawTextDataGroup(obj) {
-      if (obj.list) {
-        this.drawTextDataGroupList(obj.list);
-      }
-      if (obj.colList) {
-        this.drawTextDataGroupColList(obj.colList);
-      }
-    },
-    drawTextDataGroupColList(colList) {
-      const { originY } = this.propItems;
-      let textList = [];
-      colList.forEach((item, index) => {
-        const baseTop = originY + (item.marginTop || 10);
-        if (this.isLimit(item.scalevalue)) {
-          item.dataList.forEach((v, i) => {
-            const top = baseTop + i * (item.lineHeight || 15);
-            const text = new this.fabric.Text(String(v.value), {
-              ...defaultVaule.style,
-              ...defaultVaule.textStyle,
-              ...item.style,
-              originX: 'left',
-              originY: 'center',
-              left: this.cumputedX(item.scalevalue),
-              top,
-              lockMovementX: true,
-              lockMovementY: true,
-              dataIndex: index,
-              index: i,
-              type: 'colList',
-              id: `${index}_${i}_other_${Date.now()}`,
-              ...this.eventStyle
-            });
-            text.hasControls = text.hasBorders = false;
-            textList.push(text);
-          });
-        }
-      });
-      this.canvas.add(...textList);
-    },
-    drawTextDataGroupList(list) {
-      let textList = [];
-      const { originX, originY } = this.propItems;
-      let top = originY + 10;
-      list.forEach((item, index) => {
-        const marginLeft = item.titleStyle?.marginLeft || 8;
-        const left = originX - marginLeft; // 防止最左边的数据与名称显示重合了
-
-        if (list[index - 1]) {
-          top += item.lineHeight || 15;
-        }
-
-        const title = new this.fabric.Text(String(item.title), {
-          ...defaultVaule.style,
-          ...defaultVaule.textStyle,
-          ...item.style,
-          ...(item.titleStyle || {}),
-          originX: 'right',
-          originY: 'center',
-          left,
-          top,
-          id: `${index}_other_${Date.now()}`
-        });
-        textList.push(title);
-        item.dataList.forEach((v, i) => {
-          if (this.isLimit(v.time)) {
-            const text = new this.fabric.Text(String(v.value), {
-              ...defaultVaule.style,
-              ...defaultVaule.textStyle,
-              ...item.style,
-              originX: 'center',
-              originY: 'center',
-              left: this.cumputedX(v.time),
-              top,
-              lockMovementX: true,
-              lockMovementY: true,
-              dataIndex: index,
-              index: i,
-              type: 'list',
-              id: `${index}_${i}_other_${Date.now()}`,
-              ...this.eventStyle
-            });
-            text.hasControls = text.hasBorders = false;
-            textList.push(text);
-          }
-        });
-      });
-      this.canvas.add(...textList);
-    },
-    // 判断当前时间是否超出网格区域
-    isLimit(value) {
-      const { xScaleList } = this.propItems;
-      const minTime = Math.min(...xScaleList);
-      const maxTime = Math.max(...xScaleList);
-      const time = new Date(value).getTime();
-      return time >= minTime && time <= maxTime;
-    },
-    removeMark() {
-      this.canvas.forEachObject(obj => {
-        if (obj.type && obj.type === 'mark') {
-          this.canvas.remove(obj);
-        }
-      });
-    },
-    // 底部标记
-    drawBottomTextDataGroup(obj) {
-      if (!obj.list) {
-        return;
-      }
-      const { endX, originX, endY, canvasHeight, topTotal } = this.propItems;
-      topTotal.width && this.canvas.add(this.drawLine([endX, endY - 1, endX, canvasHeight], { ...this.defaultRectStyle }));
-      const textList = [];
-      const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
-      const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
-      const title = new this.fabric.Text(String(obj.title), {
-        ...defaultVaule.style,
-        ...defaultVaule.textStyle,
-        ...obj.style,
-        originX: 'right',
-        originY: 'center',
-        left,
-        top: endY + (canvasHeight - endY) / 2,
-        type: 'mark'
-      });
-
-      textList.push(title);
-      const baseY = endY + 2; // 目前固定10像素的下边距
-      const baseYLimit = endY - 2; // 目前固定10像素的上边距
-      const lineHeight = (obj.iconStyle?.height && obj.iconStyle.height + 2) || 14; // 标志点的line-height值
-      obj.list.forEach((item, index) => {
-        let limitIndex = -1; // 标志点是否往上排列的标志，大于-1则表示需要往上排列
-        let y = baseY;
-        const x = this.cumputedX(item[0]);
-        if (this.isLimit(item[0])) {
-          item[1].forEach(async (v, i) => {
-            if (!~limitIndex) {
-              y += i === 0 ? lineHeight / 2 : lineHeight;
-              if (y >= canvasHeight - lineHeight / 2) {
-                limitIndex++;
-                if (limitIndex === 0) {
-                  y = baseYLimit;
-                  y -= lineHeight / 2;
-                }
-              }
-            } else {
-              y -= lineHeight;
-            }
-            const common = {
-              left: x,
-              top: y,
-              originX: 'center',
-              originY: 'center',
-              data: v.data || {},
-              other: v.other || {},
-              time: item[0],
-              name: v.name,
-              type: 'mark'
-            };
-            const eventStyle = !this.eventStyle.evented
-              ? {
-                  lockMovementX: true,
-                  lockMovementY: true
-                }
-              : {};
-            if (this.isObject(v) && !v.value) {
-              const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
-                ...common,
-                ...eventStyle
-              });
-              let ele;
-              if (v?.iconClassName) {
-                ele = await this.createImage(v.iconClassName, v);
-              }
-              const img = await this.createPoint(v?.url || v?.iconClassName ? 'img' : v.type, {
-                ele: ele || '',
-                ...option
-              });
-              img.hasControls = img.hasBorders = false;
-              this.pointEvent(img);
-              this.canvas.add(img);
-              this.canvas.requestRenderAll();
-            } else {
-              const text = new this.fabric.Text(String(v.value), {
-                ...defaultVaule.textStyle,
-                ...obj.style,
-                ...common,
-                ...eventStyle
-              });
-              text.hasControls = text.hasBorders = false;
-              textList.push(text);
-              this.pointEvent(text);
-            }
-          });
-        }
-      });
-      this.canvas.add(...textList);
-    },
-    pointEvent(point) {
-      point.on('mouseover', () => {
-        this.showDrapPopup(point, true);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-      // 移动中 实时更新相关联的线的坐标
-      if (this.eventStyle.evented) {
-        point.on('moving', () => {
-          this.moveLimit(point);
-          this.canvas.renderAll();
-          this.showDrapPopup(point);
-        });
-        point.on('moved', () => {
-          this.isDropVisible = false;
-          const value = {
-            data: point.data,
-            oldVal: point.time,
-            newVal: this.getXValue(point.left)
-          };
-          this.$emit('markChange', value);
-        });
-      }
-    },
-    moveLimit(point) {
-      point.setCoords();
-      const { originX, endX, originY, canvasHeight } = this.propItems;
-      const bottom = this.templateData.bottom;
-      // 如果是起始标记，如入手术室时间
-      if (point.other?.isStart) {
-        const newList = JSON.parse(JSON.stringify(bottom.list)).sort((a, b) => {
-          return new Date(a[0]).getTime() - new Date(b[0]).getTime();
-        });
-        const obj = newList.find(v => {
-          const isStart = v[1].some(k => k.other?.isStart);
-          return !isStart && new Date(v[0]).getTime() >= new Date(point.time).getTime();
-        });
-        const limitRight = obj ? this.cumputedX(obj[0]) : endX;
-        if (point.left > limitRight) {
-          point.set('left', limitRight);
-        }
-        if (point.left < originX) {
-          point.set('left', originX);
-        }
-      } else {
-        const startList = bottom.list.find(v => v[1].some(k => k.other?.isStart));
-        const leftId = point.other?.limitLeft;
-        const limitLeftTime = leftId ? bottom.list.find(v => v[1].some(k => k.data?.id && k.data?.id === leftId))[0] : null;
-        const rightId = point.other?.limitRight;
-        const limitRightTime = rightId ? bottom.list.find(v => v[1].some(k => k.data?.id && k.data?.id === rightId))[0] : null;
-        const limitLeft =
-          (limitLeftTime && !startList) || (limitLeftTime && startList && new Date(limitLeftTime).getTime() >= new Date(startList[0]).getTime())
-            ? this.cumputedX(limitLeftTime)
-            : (!limitLeftTime && startList) || (limitLeftTime && startList && new Date(limitLeftTime).getTime() < new Date(startList[0]).getTime())
-            ? this.cumputedX(startList[0])
-            : originX;
-        const limitRight = limitRightTime ? this.cumputedX(limitRightTime) : endX;
-        if (point.left > limitRight) {
-          point.set('left', limitRight);
-        }
-        if (point.left < limitLeft) {
-          point.set('left', limitLeft);
-        }
-      }
-      if (point.top > canvasHeight - 14) {
-        point.set('top', canvasHeight - 14);
-      }
-      if (point.top < originY) {
-        point.set('top', originY);
-      }
-    },
-    showDrapPopup(point) {
-      // 第二个参数表示需要展示提供的viewTime时间
-      this.isDropVisible = true;
-      this.dropPos = {
-        left: point.left,
-        top: point.top
-      };
-      const x = arguments.length > 1 && point.other?.viewTime ? point.other.viewTime : this.getXValue(point.left);
-      this.dropVal = {
-        title: point.name || '',
-        list: [{ id: '1', name: '时间', value: x }]
-      };
-    },
-
-    drawLeftScaleGroup(dataLeft) {
-      this.drawLeftTitle(dataLeft);
-      const { canvasHeight, originX, originY, treeTableminCellWidth } = this.propItems;
-      let rect = new this.fabric.Rect({
-        left: treeTableminCellWidth,
-        top: originY,
-        width: originX - treeTableminCellWidth,
-        height: canvasHeight - originY,
-        ...defaultVaule.rectStyle,
-        ...defaultVaule.style,
-        originX: 'left',
-        originY: 'top'
-      });
-      rect.sendToBack(); // 向下跳底层
-      this.canvas.add(rect);
-    },
-    drawLeftTitle(dataLeft) {
-      if (dataLeft.title) {
-        this.canvas.add(
-          this.drawTextGroup(
-            { width: this.propItems.treeTableminCellWidth, height: this.propItems.canvasHeight - this.propItems.originY },
-            { text: String(dataLeft.title.split('').join('\n')), ...defaultVaule.textStyle, ...dataLeft.titleStyle },
-            { left: 0, top: this.propItems.originY }
-          )
-        );
-      }
-    }
-  }
-  // render(h) {
-  //   return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  // }
-};
-</script>