cnhis-design-vue 2.2.3 → 2.2.5

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

@@ -1,641 +0,0 @@
-<template>
-  <div class="line">
-    <MouseRightClick v-show="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
-    <DropPopup v-show="isDropVisible" :val="dropVal" :dropPos="dropPos" />
-  </div>
-</template>
-
-<script>
-import MouseRightClick from '../components/MouseRightClick';
-import FabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import { isObject } from '../utils';
-import DropPopup from '../components/DropPopup';
-import eventCommon from '../mixins/eventCommon';
-import vexutils from '@/utils/vexutils';
-
-const rightClickNode = [
-  { name: '修改', type: 'edit' },
-  { name: '删除', type: 'delete' },
-  { name: '开始持续', type: 'continue', subType: 'start' },
-  { name: '停止持续', type: 'continue', subType: 'end' }
-];
-export default {
-  name: 'fabric-lines',
-  mixins: [FabricCommon, eventCommon, draw],
-  props: {
-    linesObj: {
-      type: Object,
-      required: true
-    }
-  },
-  components: {
-    MouseRightClick,
-    DropPopup
-  },
-  data() {
-    return {
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null, // 当前可右键活动的对象
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      lines: [],
-      textMarginLeft: 5
-    };
-  },
-  computed: {
-    eventStyle() {
-      return this.linesObj?.eventStyle || { selectable: true, evented: true };
-    }
-  },
-  mounted() {},
-
-  methods: {
-    init() {
-      this.getLineList(this.linesObj.list);
-      this.createLine();
-      this.eventStyle.evented && this.createEvent();
-    },
-    isTopTreeAndGridLimit(x, y) {
-      const { endX, endYTop, originYTop } = this.propItems;
-      return x >= 0 && x <= endX && y >= originYTop && y <= endYTop;
-    },
-    isGridLimit({ x, y }) {
-      const { originX, endX, endYTop, originYTop } = this.propItems;
-      return x >= originX && x <= endX && y >= originYTop && y <= endYTop;
-    },
-    createEvent() {
-      this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          const { x, y } = event.pointer;
-          if (this.isTopTreeAndGridLimit(x, y)) {
-            this.activeEvent = event;
-            !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-            this.isAddEventListenerContextmenu = true;
-          }
-        }
-      });
-    },
-    handleMoving(event) {
-      const { pointer } = event;
-      const { x, y } = event.pointer;
-      this.dropPointer = { ...pointer };
-      const movingPopupContentList = [{ id: '1', name: '时间', value: this.getXValue(x) }];
-      this.movingShowPopup(movingPopupContentList);
-    },
-    /**
-     * 右键监听事件
-     */
-    addEventListenerContextmenu(event) {
-      event.preventDefault();
-      const { offsetX, offsetY } = event;
-      if (this.isTopTreeAndGridLimit(offsetX, offsetY)) {
-        this.openRightModal();
-      }
-      return false;
-    },
-    // 打开右键菜单
-    openRightModal() {
-      const { clientX, pageX, clientY, pageY } = this.activeEvent.e;
-      this.rightPos = {
-        clientX: clientX ?? pageX,
-        clientY: clientY ?? pageY
-      };
-      this.isRightVisible = false;
-      const target = this.activeEvent.target;
-      const id = target?.id || '';
-      this.$nextTick(() => {
-        if (id && id.includes('_lineGroup_')) {
-          this._currentPoint = target || '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice());
-          this.isRightVisible = true;
-        } else {
-          this.doContextmenuEvent(id, this.activeEvent.pointer);
-        }
-      });
-    },
-    doContextmenuEvent(id, pointer) {
-      const { x, y } = pointer;
-      const { treeList } = this.$propItems();
-      const _treeList = vexutils.clone(treeList, true);
-      const param = { type: 'tree', treeData: [] };
-      const isBlankGrid = !id && this.isGridLimit(pointer);
-      if (isBlankGrid) {
-        param.type = 'grid';
-        param.time = this.getXValue(x);
-        param.lineData = [];
-      }
-      ergodicTree(_treeList);
-      this.$emit('rightClick', param);
-      function ergodicTree(tree) {
-        for (let i = 0, len = tree.length; i < len; i++) {
-          const { left, top, width, height, children = [], origin, lineList = [] } = tree[i];
-          if (y >= top && y <= top + height) {
-            if (x >= left && x <= left + width) {
-              param.treeData = origin;
-              break;
-            } else if (children.length) {
-              ergodicTree(children);
-            } else if (isBlankGrid) {
-              param.treeData = origin;
-              param.lineData = lineList;
-              break;
-            }
-          }
-        }
-      }
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type, subType }) {
-      this.isRightVisible = false;
-      const line = this._currentPoint;
-      this._currentPoint = '';
-      const { lineObj } = this.updateData(line, true);
-      if (['continue'].includes(type)) {
-        this.$emit('continue', subType, lineObj);
-        return;
-      }
-      // editLine:编辑 deleteLine:删除
-      this.$emit(`${type}Line`, lineObj);
-    },
-    // 递归返回一维数据
-    getLineList(list) {
-      list.forEach(item => {
-        if (item?.children?.length) {
-          this.getLineList(item.children);
-        } else {
-          const obj = JSON.parse(JSON.stringify(item));
-          this.lines.push(obj);
-        }
-      });
-    },
-    createLine() {
-      this.lines.forEach((line, i) => {
-        this.drawLineData(line, i);
-      });
-    },
-    async drawLineData(line, i) {
-      const lineList = line.lineList || [];
-      const { originX, endX, xScaleList, yCellHeightTop, originYTop } = this.propItems;
-      const spaceHeight = Math.round(yCellHeightTop / 6);
-      const minMinute = Math.min(...xScaleList);
-      const maxMinute = Math.max(...xScaleList);
-      const lineItemList = [];
-      const y1 = i * yCellHeightTop + originYTop;
-      const y2 = yCellHeightTop * (i + 1) + originYTop;
-      let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
-      const textList = [];
-      for (let j = 0, len = lineList.length; j < len; j++) {
-        const item = lineList[j];
-        if (!item[0] || isObject(item[0])) return;
-        const startMinute = new Date(item[0]).getTime();
-        const endMinute = item[1] ? new Date(item[1]).getTime() : '';
-        let x1 = this.computedX(item[0]);
-        let x2 = this.computedX(item[1]);
-        // 数字文字
-        const textObj = item[3] || {};
-        const { content: textContent, continue: isContinue } = textObj;
-        // 左边手柄竖线
-        let leftLine;
-        if (x1 && x1 >= originX && x1 <= endX) {
-          leftLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left', customIcon: !endMinute && !isContinue });
-          lineItemList.push(leftLine);
-        } else if (x1 < originX) {
-          x1 = originX;
-        } else {
-          x1 = endX;
-        }
-
-        if (item[1] && x2 > endX) {
-          x2 = endX;
-        }
-        if (item[1] && x2 < originX) {
-          x2 = originX;
-        }
-
-        // 中间横线
-        let centerLine;
-        if (item[1] && !(endMinute >= maxMinute && startMinute >= maxMinute) && !(endMinute <= minMinute && startMinute <= minMinute)) {
-          centerLine = this.drawLine([x1, y1 + yCellHeightTop / 2, x2, y1 + yCellHeightTop / 2], {
-            ...this.linesObj.dataLineStyle,
-            selectable: false,
-            evented: false,
-            id: '_lineGroup_' + new Date().getTime(),
-            rowIndex: i
-          });
-          lineItemList.push(centerLine);
-
-          // 添加透明矩形，便于选择横线右键删除
-          const centerRect = new this.fabric.Rect({
-            id: '_lineGroup_' + new Date().getTime(),
-            fill: 'transparent',
-            width: x2 - x1 - 20,
-            height: y2 - 2 * spaceHeight - y1,
-            left: x1 + (x2 - x1) / 2,
-            top: y1 + (y2 - y1) / 2,
-            selectable: true,
-            evented: true,
-            rowIndex: i,
-            colIndex: j,
-            originX: 'center',
-            originY: 'center'
-          });
-          centerRect.lockMovementX = centerRect.lockMovementY = true;
-          centerRect.hasControls = centerRect.hasBorders = false;
-          this.hoverEvent(centerRect, { textObj, startTime: item[0], endTime: item[1] });
-          lineItemList.push(centerRect);
-          leftLine && leftLine.bringToFront();
-        }
-
-        // 右边手柄竖线
-        let rightLine;
-        if (item[1] && endMinute <= maxMinute && endMinute >= minMinute) {
-          rightLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right', isContinue });
-          lineItemList.push(rightLine);
-        }
-
-        // 设置拖动限制值
-        const leftLimit = {
-          x1: originX,
-          x2: x2 ? x2 : endX
-        };
-        const rightLimit = {
-          x1: x2 ? x1 : originX,
-          x2: endX
-        };
-        if (lineList[j - 1]) {
-          const [preItem0, preItem1] = lineList[j - 1];
-          if (preItem1) {
-            const preEndMinute = new Date(preItem1).getTime();
-            if (preEndMinute >= minMinute && preEndMinute < maxMinute) {
-              leftLimit.x1 = this.computedX(preItem1);
-              if (!x2) rightLimit.x1 = leftLimit.x1;
-            }
-          } else {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute >= minMinute && preStartMinute < maxMinute) {
-              leftLimit.x1 = this.computedX(preItem0);
-              if (!x2) rightLimit.x1 = leftLimit.x1;
-            }
-          }
-        }
-        if (lineList[j + 1]) {
-          const [preItem0] = lineList[j + 1];
-          if (preItem0) {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute > minMinute && preStartMinute <= maxMinute) {
-              rightLimit.x2 = this.computedX(preItem0);
-              if (!x2) leftLimit.x2 = rightLimit.x2;
-            }
-          }
-        }
-
-        // 文字内容
-        const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
-        let text =
-          (endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
-            ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, x1, x2, { leftLimit, rightLimit, y2 })
-            : null;
-        // 文字内容居右侧竖线且超出当前线段右边界则移除
-        if (text) {
-          textArr = [];
-          this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
-          textList.push(text);
-        }
-
-        const commonOptions = {
-          __range: [x1, x2],
-          __baseY: y2,
-          centerLine,
-          text,
-          textObj,
-          leftLimit,
-          rightLimit,
-          startTime: item[0],
-          endTime: item[1]
-        };
-        this.lineEvent({
-          __position: 'left',
-          line: leftLine,
-          limitX: leftLimit,
-          preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
-          ...commonOptions
-        });
-        this.lineEvent({ __position: 'right', line: rightLine, limitX: rightLimit, preText: null, ...commonOptions });
-      }
-      this.canvas.add(...lineItemList, ...textList);
-    },
-    drawLineText(textArr, top, i, j, x1, x2, { leftLimit, rightLimit, y2 }) {
-      const value = textArr.filter(v => v !== '').join('—');
-
-      if (value === '') return null;
-      const text = new this.fabric.Text(value, {
-        top,
-        evented: true,
-        selectable: true,
-        lockMovementX: true,
-        lockMovementY: true,
-        backgroundColor: '#fff',
-        originY: 'center',
-        id: '_lineGroup_' + new Date().getTime(),
-        rowIndex: i,
-        colIndex: j,
-        objectCaching: false,
-        ...(this.linesObj.dataTextStyle || {})
-      });
-      this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, y2);
-      text.hasControls = text.hasBorders = false;
-      return text;
-    },
-    setTextPosition(text, top, x1, x2, leftLimit, rightLimit, baseY) {
-      const textWidth = text.width + 2; // 横线小于text文字的宽度则text显示在右侧
-      const centerLineWidth = (x2 || x1) - x1 ?? 0;
-      const rightWidth = rightLimit.x2 - leftLimit.x2 || rightLimit.x2 - x1 || 0;
-      const leftWidth = rightLimit.x1 - leftLimit.x1 || x1 - leftLimit.x1 || 0;
-      const changeOptions = {
-        originX: 'center',
-        left: x1 + centerLineWidth / 2,
-        top,
-        scaleX: 1,
-        scaleY: 1,
-        originY: 'center',
-        backgroundColor: '#fff',
-        textLimit: {
-          x1,
-          x2: x2 || x1
-        }
-      };
-
-      if (centerLineWidth >= textWidth) {
-        // console.log('正常显示的文本')
-      } else if (textWidth <= rightWidth) {
-        changeOptions.originX = 'left';
-        changeOptions.left = (x2 ? x2 : x1 + 3) + this.textMarginLeft;
-        changeOptions.backgroundColor = 'transparent';
-        changeOptions.textLimit.x2 = changeOptions.left + text.width;
-      } else if (textWidth <= leftWidth) {
-        changeOptions.originX = 'right';
-        changeOptions.left = x1 - 3 - this.textMarginLeft;
-        changeOptions.backgroundColor = 'transparent';
-        changeOptions.textLimit.x1 = changeOptions.left - text.width;
-      } else {
-        changeOptions.scaleX = 0.75;
-        changeOptions.scaleY = 0.75;
-        changeOptions.originY = 'bottom';
-        changeOptions.top = baseY + 1.5;
-        changeOptions.backgroundColor = 'transparent';
-        if (leftLimit.x1 == this.propItems.originX) {
-          changeOptions.originX = 'left';
-          changeOptions.left = leftLimit.x1 + this.textMarginLeft;
-        }
-        if (rightLimit.x2 == this.propItems.endX) {
-          changeOptions.originX = 'right';
-          changeOptions.left = rightLimit.x2 - this.textMarginLeft;
-        }
-      }
-      text.setCoords().set(changeOptions);
-    },
-    /**
-     * @description: 画-|-样式的组
-     * @param {*} x1 // |-|中左侧线的x轴坐标
-     * @param {*} x2 // |-|中右侧线的x轴坐标
-     * @param {*} y1 // |-|中竖线的顶部y轴坐标
-     * @param {*} y2 // |-|中竖线的底部y轴坐标
-     * @param {*} position // 定位当前线是左侧线还是右侧线
-     * @return {*}
-     */
-
-    async drawGroup(x1, x2, y1, y2, i, j, others) {
-      const id = '_lineGroup_' + Date.now();
-      let point;
-      let left;
-      const { position, customIcon, isContinue } = others;
-      const halfH = (y2 - y1) / 2;
-      if (position === 'left') {
-        point = [x1, y1, x1, y2 - halfH + 1];
-        left = x1 - this.propItems.xCellWidth / 2;
-      } else {
-        point = [x2, y1, x2, y2 - halfH + 1];
-        left = x2 - this.propItems.xCellWidth / 2;
-      }
-      let line;
-      const common = {
-        selectable: false,
-        evented: false
-      };
-      const { dataLineStyle = {} } = this.linesObj;
-      if (customIcon) {
-        const _customIcon = this.linesObj.customIcon || {
-          type: 'circle'
-        };
-
-        line = await this.createPoint(_customIcon.type, {
-          left: x1,
-          top: y1 + halfH,
-          originY: 'center',
-          ...dataLineStyle,
-          ...(dataLineStyle.stroke
-            ? {
-                fill: dataLineStyle.stroke
-              }
-            : {}),
-          ...(_customIcon.style || {}),
-          ...common
-        });
-      } else {
-        line = isContinue
-          ? await this.createArrow({
-              left: x2,
-              top: y1 + halfH - 3.5,
-              originY: 'bottom',
-              originX: 'right',
-              fill: 'transparent',
-              width: 7,
-              height: 7,
-              angle: 270,
-              ...dataLineStyle,
-              ...common
-            })
-          : this.drawLine(point, {
-              ...dataLineStyle,
-              ...common
-            });
-      }
-      const rect = new this.fabric.Rect({
-        width: this.propItems.xCellWidth,
-        height: y2 - y1,
-        fill: 'transparent',
-        left,
-        top: y1,
-        selectable: false,
-        evented: false
-      });
-
-      return new this.fabric.Group([line, rect], {
-        selectable: true,
-        evented: true,
-        originX: 'center',
-        originY: 'center',
-        id,
-        rowIndex: i,
-        colIndex: j,
-        ...this.eventStyle,
-        ...others,
-        isContinue,
-        lockMovementY: true // 锁定Y轴，即只能x轴方向移动
-      });
-    },
-    hoverEvent(point, attr) {
-      const { textObj, startTime, endTime } = attr;
-      startTime && (point.startTime = startTime);
-      endTime && (point.endTime = endTime);
-      textObj && (point.textObj = textObj);
-      point.on('mouseover', () => {
-        this.showDrapPopup(point);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-    },
-    lineEvent(attr) {
-      const { line, centerLine, text, textObj, leftLimit, rightLimit, limitX, startTime, endTime, preText, __position, __range, __baseY } = attr;
-      if (line) {
-        line.hasControls = line.hasBorders = false;
-        centerLine && (line.centerLine = centerLine);
-        text && (line.text = text);
-        line.limitX = limitX;
-        preText && (line.preText = preText);
-        line.leftLimit = leftLimit;
-        line.rightLimit = rightLimit;
-        line.__position = __position;
-        line.__range = __range;
-        line.__baseY = __baseY;
-
-        this.hoverEvent(line, { textObj, startTime, endTime });
-        // 移动中 实时更新相关联的线的坐标
-        line.on('moving', () => {
-          this.lineMoveLimit(line);
-          this.textUpdatePositionX(line);
-          // this.canvas.renderAll();
-          this.showDrapPopup(line);
-        });
-        line.on('moved', () => {
-          // const objBoundingBox = line.getBoundingRect();
-          if (line && line.id.includes('_lineGroup_')) {
-            this.isDropVisible = false;
-            const { lineObj } = this.updateData(line);
-            this.updateLine(line.rowIndex);
-            this.$emit('lineChange', { ponits: { x: line.left, y: line.top }, value: lineObj });
-          }
-        });
-      }
-    },
-    showDrapPopup(line) {
-      this.isDropVisible = true;
-      const { yCellHeightTop } = this.propItems;
-      this.dropPos = {
-        left: line.left,
-        top: line.top,
-        margin: { top: yCellHeightTop / 2 }
-      };
-      let startTime, endTime, obj;
-      if (line.limitX) {
-        const { position } = line;
-        const { lineObj, x } = this.updateData(line);
-        obj = lineObj;
-        startTime = position === 'left' ? x : line.startTime || '';
-        endTime = position === 'left' ? line.endTime || '' : x;
-      } else {
-        obj = this.updateData(line, true).lineObj;
-        startTime = line.startTime || '';
-        endTime = line.endTime || '';
-      }
-      this.dropVal = {
-        title: obj.title || '',
-        list: [
-          { id: '1', name: '开始时间', value: startTime },
-          { id: '2', name: '结束时间', value: endTime },
-          { id: '3', name: '流速', value: line.textObj?.currentSpeed || '' },
-          { id: '4', name: '浓度', value: line.textObj?.consistence || '' },
-          { id: '5', name: '总量', value: line.textObj?.total || '' }
-        ]
-      };
-    },
-    // 移动手柄竖线后，需要更新this.lines，便于后面重新渲染时重新计算其左右限制坐标点
-    updateData(line, isHover) {
-      if (!line) return;
-      const { rowIndex, colIndex, position, left, isContinue } = line;
-      const linesRow = this.lines[rowIndex];
-      // isHover，只是鼠标移上去显示提示信息而不需要重新计算x值
-      if (isHover) {
-        return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], rowIndex, index: colIndex } };
-      }
-      const x = this.getXValue(isContinue ? left + 0.5 : left);
-      if (position === 'left') {
-        linesRow.lineList[colIndex][0] = x;
-      } else {
-        linesRow.lineList[colIndex][1] = x;
-      }
-      return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], val: x }, x };
-    },
-    // 直线数组更新后 移除旧的直线并绘制新的直线，处理拖动限制不能更新的问题
-    updateLine(rowIndex) {
-      this.canvas.forEachObject(obj => {
-        if (obj.rowIndex === rowIndex) {
-          this.canvas.remove(obj);
-        }
-      });
-      this.drawLineData(this.lines[rowIndex], rowIndex);
-    },
-    // 移除头部表格所有线条数字数据
-    removeLines() {
-      this.canvas.forEachObject(obj => {
-        if (obj.id && obj.id.includes('_lineGroup_')) {
-          this.canvas.remove(obj);
-        }
-      });
-      this.lines = [];
-    },
-    drawLine(lines, others) {
-      const line = new this.fabric.Line(lines, {
-        objectCaching: false,
-        ...others
-      });
-      return line;
-    },
-    lineMoveLimit(line) {
-      line.setCoords(); // 需调用setCoords()才能重新计算控制位置(改变Object状态)
-      if (line.left < line.limitX.x1) {
-        line.set('left', line.limitX.x1);
-      }
-      if (line.left > line.limitX.x2) {
-        line.set('left', line.limitX.x2);
-      }
-      if (line.centerLine) {
-        const options = line.__position === 'left' ? { x1: line.left } : { x2: line.left };
-        line.centerLine.setCoords().set(options);
-      }
-    },
-    textUpdatePositionX(line) {
-      const text = line.text || null;
-      if (text) {
-        const { __baseY, __range, leftLimit, rightLimit, __position } = line;
-        const x1 = __position === 'left' ? line.left : __range[0];
-        const x2 = __position === 'right' ? line.left : __range[1];
-        const top = __baseY - this.propItems.yCellHeightTop / 2;
-        this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, __baseY);
-      }
-    },
-    repaintLine() {
-      if (this.lines.length) {
-        this.removeLines();
-      }
-      this.getLineList(this.linesObj.list);
-      this.createLine();
-    }
-  },
-  beforeDestroy() {}
-};
-</script>