cnhis-design-vue 0.1.40 → 0.1.42

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

@@ -10,7 +10,7 @@ import MouseRightClick from '../components/MouseRightClick';
 import FabricCommon from '../mixins/fabricCommon';
 import { isObject } from '../mixins/type';
 import DropPopup from '../components/DropPopup';
-import polylineCommon from '../mixins/polylineCommon';
+import eventCommon from '../mixins/eventCommon';
 
 const rightClickNode = [
   { name: '修改', type: 'edit' },
@@ -18,7 +18,7 @@ const rightClickNode = [
 ];
 export default {
   name: 'fabric-lines',
-  mixins: [FabricCommon, polylineCommon],
+  mixins: [FabricCommon, eventCommon],
   props: {
     linesObj: {
       type: Object,
@@ -27,7 +27,7 @@ export default {
   },
   components: {
     MouseRightClick,
-    DropPopup,
+    DropPopup
   },
   data() {
     return {
@@ -42,6 +42,11 @@ export default {
       textMarginLeft: 5
     };
   },
+  computed: {
+    eventStyle() {
+      return this.linesObj?.eventStyle || { selectable: true, evented: true };
+    }
+  },
 
   watch: {
     // linesObj: {
@@ -68,7 +73,7 @@ export default {
     init() {
       this.getLineList(this.linesObj.list);
       this.createLine();
-      this.createEvent();
+      this.eventStyle.evented && this.createEvent();
     },
     createEvent() {
       this.canvas.on('mouse:up', event => {
@@ -97,9 +102,6 @@ export default {
     },
     // 打开右键菜单
     openRightModal(event) {
-      if (!this.propItems.eventStyle.evented) {
-        return;
-      }
       this.rightPos = {
         clientX: event.e.clientX || event.e.pageX,
         clientY: event.e.clientY || event.e.pageY
@@ -127,7 +129,7 @@ export default {
     // 递归返回一维数据
     getLineList(list) {
       list.forEach(item => {
-        if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+        if (item?.children?.length) {
           this.getLineList(item.children);
         } else {
           const obj = JSON.parse(JSON.stringify(item));
@@ -152,7 +154,7 @@ export default {
       let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
       const textList = [];
       lineList.forEach((item, j) => {
-        if ( !item[0] || isObject(item[0])) return;
+        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.cumputedX(item[0]);
@@ -164,7 +166,7 @@ export default {
         // 左边手柄竖线
         let leftLine;
         if (x1 && x1 >= originX && x1 <= endX) {
-          leftLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left'});
+          leftLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left' });
           lineItemList.push(leftLine);
         } else if (x1 < originX) {
           x1 = originX;
@@ -181,7 +183,7 @@ export default {
 
         // 中间横线
         let centerLine;
-        if (item[1] && (!(endMinute >= maxMinute && startMinute >= maxMinute) && !(endMinute <= minMinute && startMinute <= minMinute))) {
+        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,
@@ -208,7 +210,7 @@ export default {
           });
           centerRect.lockMovementX = centerRect.lockMovementY = true;
           centerRect.hasControls = centerRect.hasBorders = false;
-          this.hoverEvent(centerRect, {textObj, startTime: item[0], endTime: item[1]});
+          this.hoverEvent(centerRect, { textObj, startTime: item[0], endTime: item[1] });
           lineItemList.push(centerRect);
           leftLine && leftLine.bringToFront();
         }
@@ -216,15 +218,15 @@ export default {
         // 右边手柄竖线
         let rightLine;
         if (item[1] && endMinute <= maxMinute && endMinute >= minMinute) {
-          rightLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j,  { position: 'right'});
+          rightLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right' });
           lineItemList.push(rightLine);
         }
 
         // 文字内容
         const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
         let textLimitRight;
-        let text = 
-          ((endMinute === '' && leftLine) || (item[1] && (!(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))))
+        let text =
+          (endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
             ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, centerLine, x1, x2)
             : null;
         // 文字内容居右侧竖线且超出当前线段右边界则移除
@@ -236,7 +238,7 @@ export default {
             text = null;
           } else {
             textArr = [];
-            this.hoverEvent(text, {textObj, startTime: item[0], endTime: item[1]});
+            this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
             textList.push(text);
           }
         }
@@ -266,8 +268,18 @@ export default {
           }
         }
 
-        this.lineEvent({line: leftLine, line1: centerLine, text, textObj, limitX: leftLimit, startTime: item[0], endTime: item[1], preText: textList[text ? textList.length - 2 : textList.length - 1] || null, textLimitRight});
-        this.lineEvent({line: rightLine, line2: centerLine, text, textObj, limitX: rightLimt, startTime: item[0], endTime: item[1], preText: null, textLimitRight: rightLimt.x2});
+        this.lineEvent({
+          line: leftLine,
+          line1: centerLine,
+          text,
+          textObj,
+          limitX: leftLimit,
+          startTime: item[0],
+          endTime: item[1],
+          preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
+          textLimitRight
+        });
+        this.lineEvent({ line: rightLine, line2: centerLine, text, textObj, limitX: rightLimt, startTime: item[0], endTime: item[1], preText: null, textLimitRight: rightLimt.x2 });
       });
       this.canvas.add(...lineItemList, ...textList);
       this.canvas.requestRenderAll();
@@ -280,7 +292,7 @@ export default {
       //   return `${v.currentSpeed || ''}${channel}${consistence}${total}`
       // }).join('—');
       const value = textArr.filter(v => v !== '').join('—');
-      
+
       if (value === '') return null;
       const text = new this.fabric.Text(value, {
         top,
@@ -341,7 +353,6 @@ export default {
         evented: false
       });
 
-      const eventStyle = this.linesObj?.eventStyle || {selectable: true,evented: true};
       return new this.fabric.Group([line, rect], {
         selectable: true,
         evented: true,
@@ -350,13 +361,13 @@ export default {
         id,
         rowIndex: i,
         colIndex: j,
-        ...eventStyle,
+        ...this.eventStyle,
         ...others,
         lockMovementY: true // 锁定Y轴，即只能x轴方向移动
       });
     },
     hoverEvent(point, attr) {
-      const {textObj, startTime, endTime} = attr;
+      const { textObj, startTime, endTime } = attr;
       startTime && (point.startTime = startTime);
       endTime && (point.endTime = endTime);
       textObj && (point.textObj = textObj);
@@ -368,7 +379,7 @@ export default {
       });
     },
     lineEvent(attr) {
-      const {line, line1, line2, text, textObj, limitX, startTime, endTime, preText, textLimitRight} = attr;
+      const { line, line1, line2, text, textObj, limitX, startTime, endTime, preText, textLimitRight } = attr;
       if (line) {
         line.hasControls = line.hasBorders = false;
         line1 && (line.line1 = line1);
@@ -377,7 +388,7 @@ export default {
         line.limitX = limitX;
         preText && (line.preText = preText);
         textLimitRight && (line.textLimitRight = textLimitRight);
-        this.hoverEvent(line, {textObj, startTime, endTime});
+        this.hoverEvent(line, { textObj, startTime, endTime });
         // 移动中 实时更新相关联的线的坐标
         line.on('moving', () => {
           this.lineMoveLimit(line);
@@ -403,11 +414,9 @@ export default {
       this.dropPos = {
         left: line.left,
         top: line.top,
-        margin: { top: yCellHeightTop / 2 },
+        margin: { top: yCellHeightTop / 2 }
       };
-      let startTime,
-        endTime,
-        obj;
+      let startTime, endTime, obj;
       if (line.limitX) {
         const { position } = line;
         const { lineObj, x } = this.updateData(line);
@@ -422,22 +431,22 @@ export default {
       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 || ''},
+          { 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} = line;
+      const { rowIndex, colIndex, position, left } = line;
       const linesRow = this.lines[rowIndex];
       // isHover，只是鼠标移上去显示提示信息而不需要重新计算x值
       if (isHover) {
-        return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], rowIndex, index: colIndex} };
+        return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], rowIndex, index: colIndex } };
       }
       const x = this.getXValue(left);
       if (position === 'left') {
@@ -445,7 +454,7 @@ export default {
       } else {
         linesRow.lineList[colIndex][1] = x;
       }
-      return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], val: x}, x };
+      return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], val: x }, x };
     },
     // 直线数组更新后 移除旧的直线并绘制新的直线，处理拖动限制不能更新的问题
     updateLine(rowIndex) {
@@ -532,6 +541,6 @@ export default {
       this.createLine();
     }
   },
-  beforeDestroy() {},
+  beforeDestroy() {}
 };
 </script>