cnhis-design-vue 2.1.100 → 2.1.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "2.1.100",
+  "version": "2.1.101",
   "description": "前端业务UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",

package/packages/big-table/src/BigTable.vue

@@ -170,6 +170,18 @@ import eventBroadcast from './utils/eventBroadcast';
 import bigTableProps from './utils/bigTableProps';
 import SvgIcon from '@/component/svg/index.vue';
 import cloneDeep from 'lodash/cloneDeep';
+const filterTopOffsetMap = {
+  large: 28,
+  medium: 24,
+  small: 22,
+  extrasmall: 20
+}
+const fontSizeMap = {
+  large: 1.25,
+  medium: 1.1,
+  small: 1,
+  extrasmall: 0.9
+}
 let addInlineEditPrimaryKey = '';
 export default create({
   name: 'big-table',
@@ -681,7 +693,7 @@ export default create({
           i[`_${item}__redner_before_`] = {
             isLink: col ? this.isLink(col, i) : undefined,
             isCopy:col ? this.isCopy(col, i) : undefined,
-            tips:col ? this.handleValueTips(col, i) : undefined,
+            tips:col ? this.handleValueTips(i, col) : undefined,
             isHtml:this.checkHtml(i[item])
           }
 
@@ -2130,7 +2142,9 @@ export default create({
       if (this.isInlineOperating) return false;
       let target = event.target;
       const FILTER_BOX_WIDTH = 400;
-      const FILTER_BOX_TOP_OFFSET = 20;
+      let fontSize = this.styleSetting?.fontSize ||  'small'
+      const scaleNum = fontSizeMap[fontSize]
+      const FILTER_BOX_TOP_OFFSET = filterTopOffsetMap[fontSize]
 
       let transformWrap = document.body;
       let { left: btnRectLeft, right: btnRectRight, top: btnRectTop, width: btnWidth } = target.getBoundingClientRect();
@@ -2141,12 +2155,16 @@ export default create({
       let transformWrapWidth = transformWrap.clientWidth;
       if (btnRectLeft + FILTER_BOX_WIDTH > transformWrapWidth) {
         let transformWrapRight = transformWrap?.getBoundingClientRect().right || 0;
-        field.right = transformWrapRight - btnRectRight - btnWidth / 2 + 'px';
+        const right = transformWrapRight - btnRectRight - btnWidth / 2
+        field.right = right / scaleNum  + 'px';
       } else {
-        field.left = btnRectLeft + (this.filterLeftOffset || 0) + 'px';
+        const left = btnRectLeft + (this.filterLeftOffset || 0)
+        field.left = left / scaleNum + 'px';
       }
 
-      field.top = btnRectTop + FILTER_BOX_TOP_OFFSET + (this.filterTopOffset || 0) + 'px';
+
+      const top = btnRectTop + FILTER_BOX_TOP_OFFSET + (this.filterTopOffset || 0)
+      field.top = top / scaleNum + 'px';
 
       field.visible = !field.visible;
 
@@ -2602,6 +2620,16 @@ export default create({
       let table = this.$refs.xGrid;
       if (!table) return;
       let curRow = table?.getRowById(id);
+      const {fullData} = table.getTableData()
+      if(!curRow) {
+        if(fullData?.length) {
+          curRow = fullData.find(item => item[this.handleRowId] === id)
+          if(!curRow) {
+            let oId = row.__originItem__?.[this.handleRowId]
+            oId && (curRow = fullData.find(item => item[this.handleRowId] === oId));
+          }
+        }
+      }
       if (!curRow) return;
       this.handlerClickRow({ row: curRow });
     },

package/packages/big-table/src/assets/style/table-global.less

@@ -3,7 +3,6 @@
   position: fixed;
   z-index: 99998;
   transform: translateX(-2%);
-  margin-top: -6px;
 
   // max-width: 400px;
   min-width: 280px;
@@ -18,9 +17,7 @@
   flex-direction: column;
   overflow: hidden;
   transition: width 2s;
-  .sort-list {
-    margin-top: 6px;
-  }
+  padding-top: 8px;
   .sort-item {
     line-height: 32px;
     padding: 0 13px;
@@ -76,6 +73,7 @@
 
   .checkbox-box {
     padding-right: 3px;
+    margin-top: 4px;
     width: 100%;
   }
   .checkbox-wrap {
@@ -134,7 +132,7 @@
   .checkbox-btn-wrap {
     display: flex;
     // justify-content: space-between;
-    padding: 9px 10px 19px 14px;
+    padding: 8px 10px 8px 14px;
 
     .checkbox-btn {
       width: 56px;

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

@@ -63,7 +63,7 @@ export default create({
       return list;
     },
     hasTopTable() {
-      return this.templateData.top?.list?.length > 0;
+      return typeof this.templateData.top?.show === 'undefined' || this.templateData.top?.show;
     },
     hasTable() {
       const hasLeft = this.templateData.left?.leftYScalevalue?.list?.length > 0;

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

@@ -93,6 +93,7 @@ export default {
     }
 
     this.throttleEvent = vexutils.throttle((event, componentInstance) => {
+      if (!componentInstance) return;
       const { eventStyle = null, handleMoving = null } = componentInstance;
       eventStyle.evented && handleMoving?.(event);
     }, 50);
@@ -237,7 +238,7 @@ export default {
       return this.templateData.table?.operable || { set: false, connect: false, lockMovementX: false };
     },
     fabricLinesInstances() {
-      return this.$slots.default.find(VNode => /lines/.test(VNode.tag))?.componentInstance;
+      return this.$slots.default.find(VNode => /fabric-lines/.test(VNode.tag))?.componentInstance;
     },
     fabricPolylinesInstances() {
       // return this.$slots.default.filter(VNode => /(polylines)|(lines)/.test(VNode.tag));
@@ -249,15 +250,16 @@ export default {
   },
   methods: {
     init() {
+      const { canvasWidth, canvasHeight, top } = this.templateData;
       this.canvas = new this.fabric.Canvas(this.id, {
-        width: this.templateData.canvasWidth,
-        height: this.templateData.canvasHeight,
+        width: canvasWidth,
+        height: canvasHeight,
         ...this.canvasAttr
       });
 
-      if (this.templateData.top?.list?.length) {
-        this.getGridYnumberTop(this.templateData.top.list);
-        this.treeList = this.setTreeStyle(vexutils.clone(this.templateData.top.list, true));
+      if ((typeof top?.show === 'undefined' || top?.show) && top?.list?.length) {
+        this.getGridYnumberTop(top.list);
+        this.treeList = this.setTreeStyle(vexutils.clone(top.list, true));
       }
 
       this.canvas.on('mouse:move', event => {
@@ -269,10 +271,10 @@ export default {
           this.fabricPolylinesInstances.isDropVisible = false;
         } else if (x > originX && x < endX && y > originY && y < endY && !target) {
           this.throttleEvent?.(event, this.fabricPolylinesInstances);
-          this.fabricLinesInstances.isDropVisible = false;
+          if (this.fabricLinesInstances) this.fabricLinesInstances.isDropVisible = false;
         } else if (x <= originX || x >= endX || !((y > originY && y < endY) || (y > originYTop && y < endYTop))) {
           this.fabricPolylinesInstances.isDropVisible = false;
-          this.fabricLinesInstances.isDropVisible = false;
+          if (this.fabricLinesInstances) this.fabricLinesInstances.isDropVisible = false;
         }
       });
     },

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

@@ -37,7 +37,8 @@ function resetPointColor(pointArr, color) {
   });
 }
 const setPointLineColor = (point, color, conditionHasLine2) => {
-  point.line1?.set({ stroke: color });
+  const line1Color = color === 'transparent' ? color : point.prevPoint?.__attrs?.lineAttr?.stroke || color;
+  point.line1?.set({ stroke: line1Color });
   conditionHasLine2 && point.line2?.set({ stroke: color });
 };
 
@@ -153,8 +154,7 @@ export default {
         // 左键松开鼠标-批量删除
         this.isSelectArea = false;
         if (event.button === 1 && this.selectArea) {
-          const points = this.selectArea.ponits;
-          const { polylineList, otherList } = this.getAreaPonits(points);
+          const { polylineList, otherList } = this.getAreaPoints();
           !polylineList.length && !otherList.length && this.removeSelectArea();
           if (polylineList.length > 0 && this.selectArea) {
             this.$emit('pointOperation', 'delete', polylineList);
@@ -166,7 +166,7 @@ export default {
           }
         }
       });
-      const selectAreaOrigin = { left: 0, top: 0 };
+      let startPos;
       this.canvas.on('mouse:down', event => {
         if (event.button !== 1) return;
 
@@ -209,12 +209,11 @@ export default {
 
         if (!event.target) {
           this.isSelectArea = true;
-          selectAreaOrigin.left = event.pointer.x;
-          selectAreaOrigin.top = event.pointer.y;
+          startPos = event.pointer;
         }
       });
       this.canvas.on('mouse:move', event => {
-        this.isSelectArea && this.createSelectArea(event, selectAreaOrigin);
+        this.isSelectArea && this.createSelectArea(event, startPos);
         this.setTimeRange(event.pointer);
       });
     },
@@ -237,16 +236,19 @@ export default {
       this.movingShowPopup(movingPopupContentList);
     },
     // 获取选区内包含的节点
-    getAreaPonits(points) {
+    getAreaPoints() {
       const polylineList = [];
       let otherList = [];
-      const [x1, y1, x2, y2] = points;
+      if (!this.selectArea?.areaPos) return { polylineList, otherList };
+      const { startPos, endPos } = this.selectArea.areaPos;
+      const [x1, x2] = [startPos.x, endPos.x].sort((a, b) => a - b);
+      const [y1, y2] = [startPos.y, endPos.y].sort((a, b) => a - b);
       this.canvas.forEachObject(obj => {
         const { id, left, top, currentDelPoint } = obj;
         const isArea = left >= x1 && left <= x2 && top >= y1 && top <= y2;
         if (isArea && this.isGridLimit(left, top) && id) {
           if (/_polyline(Point)_/.test(id)) {
-            const data = this.getDataById(id);
+            const data = this.getDataByPoint(obj);
             if (currentDelPoint) {
               if (currentDelPoint.polylineIndex == obj.polylineIndex) {
                 polylineList.push(data);
@@ -271,10 +273,10 @@ export default {
       return { polylineList, otherList };
     },
     // 创建选区
-    createSelectArea(event, selectAreaOrigin) {
+    createSelectArea(event, startPos) {
       this.selectArea && this.canvas.remove(this.selectArea);
-      const [x1, y1] = [selectAreaOrigin.left, selectAreaOrigin.top];
-      const [x2, y2] = [event.pointer.x, event.pointer.y];
+      const { x: x1, y: y1 } = startPos;
+      const { x: x2, y: y2 } = event.pointer;
       this.selectArea = new this.fabric.Rect({
         ...defaultVaule.style,
         fill: '#CAF982',
@@ -282,9 +284,9 @@ export default {
         left: x1,
         top: y1,
         width: x2 - x1,
-        height: y2 - y1,
-        ponits: x1 < x2 ? [x1, y1, x2, y2] : [x2, y2, x1, y1]
+        height: y2 - y1
       });
+      this.selectArea.areaPos = { startPos, endPos: event.pointer };
       this.canvas.add(this.selectArea);
     },
     createTimeRangeLine(line, pointer) {
@@ -332,7 +334,16 @@ export default {
 
       this.polyline.forEach((item, index) => {
         item.dataList.forEach((v, i) => {
-          const point = v.list.find(k => isEffectiveNode(k) && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() <= maxTime);
+          let targetList = v.list;
+          let linkKey = '';
+          if (v.linkKey) {
+            const target = item.dataList.find(_data => _data.key === v.linkKey);
+            if (target) {
+              targetList = target.list;
+              linkKey = v.linkKey;
+            }
+          }
+          const point = targetList.find(k => isEffectiveNode(k) && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() <= maxTime);
           const firstPointLeft = point ? this.cumputedX(point.time) : 0;
           const rightLimit = point ? firstPointLeft - this.spaceWidth : '';
           // 配置是否可拖动标题图标批量增加-
@@ -345,7 +356,14 @@ export default {
             polylineTypeId: index,
             polylineIndex: i,
             isAdd,
-            rightLimit
+            rightLimit,
+            __attrs: {
+              title: v.title,
+              pointAttr: v.pointAttr,
+              lineAttr: v.pointAttr,
+              key: v.key,
+              linkKey
+            }
           });
         });
       });
@@ -398,7 +416,8 @@ export default {
           polylineTypeId: v.polylineTypeId,
           polylineIndex: v.polylineIndex,
           ...(v.isAdd && this.eventStyle.evented ? {} : eventStyle),
-          rightLimit: v.rightLimit || ''
+          rightLimit: v.rightLimit || '',
+          __attrs: v.__attrs
         };
         let ele;
         if (v.type === 'img' && v.pointAttr?.iconClassName) {
@@ -590,8 +609,7 @@ export default {
      */
     drawPolyline(polyline, polylineIndex, polylineType, polylineTypeId) {
       const { originY, endY } = this.propItems;
-      const { pointAttr, lineAttr, list = [], critical = {}, diffValue = {} } = polyline;
-      this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
+      const { list = [], critical = {}, diffValue = {} } = polyline;
 
       const pointList = [];
       let lineList = [];
@@ -609,6 +627,16 @@ export default {
       }
       this.flickerablePoints = this.flickerablePoints.filter(point => point.polylineTypeId !== polylineTypeId && point.polylineIndex !== polylineIndex);
       list.forEach((linePoints, index) => {
+        let { pointAttr, lineAttr = {}, type, title } = polyline;
+        const target = polylineType.dataList.find(_data => linePoints.key && _data.key === linePoints.key);
+        if (target) {
+          type = target.type;
+          pointAttr = target.pointAttr;
+          lineAttr = target.lineAttr;
+          title = target.title;
+        }
+        this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
+
         // 当前点
         let { points, isInit } = getPointer(linePoints);
 
@@ -627,9 +655,16 @@ export default {
             originLeft: points[0],
             originTop: points[1],
             time: linePoints.time,
-            __value: linePoints.value
+            __value: linePoints.value,
+            __attrs: {
+              type,
+              pointAttr,
+              lineAttr,
+              title,
+              key: linePoints.key
+            }
           });
-          point = previousLine ? this.drawPoint(...points, previousLine, line, polyline.type, pointOthers, isInit) : this.drawPoint(...points, null, line, polyline.type, pointOthers, isInit);
+          point = previousLine ? this.drawPoint(...points, previousLine, line, type, pointOthers, isInit) : this.drawPoint(...points, null, line, type, pointOthers, isInit);
         }
         lineList.push(line);
         point && pointList.push(point);
@@ -649,7 +684,6 @@ export default {
             polylineTypeId,
             polylineIndex,
             pointerList,
-            color: lineAttr.stroke,
             pointList: res
           });
         }
@@ -769,7 +803,7 @@ export default {
       const { operable } = this.propItems;
       const { data, x, y } = this.getValue(point);
       Object.assign(data, {
-        value: { time: operable.lockMovementX ? point.time : x, value: y },
+        value: { time: operable.lockMovementX ? point.time : x, value: y, ...(point.__attrs?.key ? { key: point.__attrs.key } : {}) },
         isInit
       });
       if (this.addPointList.length === 0) {
@@ -800,7 +834,8 @@ export default {
             ...lastPoint,
             value: {
               time: this.getXValue(this._concatPoint?.left),
-              value: this.getYValue(position, this._concatPoint?.top)
+              value: this.getYValue(position, this._concatPoint?.top),
+              ...(point.__attrs?.key ? { key: point.__attrs.key } : {})
             }
           };
           if (lastPoint.value.time == addOjb.value.time) {
@@ -828,9 +863,10 @@ export default {
     // 设置批量新增数据
     setAddPointList(point) {
       const { data, x, y } = this.getValue(point);
-      data.value = { time: x, value: y };
+      data.value = { time: x, value: y, ...(point.__attrs.linkKey ? { key: point.__attrs.key } : {}) };
       data.left = point.left;
       data.top = top;
+      if (point.__attrs.linkKey) data.linkKey = point.__attrs.linkKey;
       this.addPointList.push(data);
     },
     // 纠正线段坐标
@@ -881,6 +917,7 @@ export default {
                 cloneObj.top = prePoint.top + spaceHeight;
                 cloneObj.value.time = this.getXValue(curLeft);
                 cloneObj.value.value = this.getYValue(position, cloneObj.top);
+                if (point.__attrs.key) cloneObj.value.key = point.__attrs.key;
                 cloneObj.left = curLeft;
                 this.addPointList.splice(index, 0, cloneObj);
                 this.clonePoint(point, [prePoint.left, prePoint.top, cloneObj.left, cloneObj.top]);
@@ -931,6 +968,7 @@ export default {
               // 调用上面方法就会导致线段绘制失败，目前还不知道为啥子
               const { data, x, y } = this.getValue(point);
               data.value = { time: x, value: y };
+              if (point.__attrs.key) data.value.key = point.__attrs.key;
               data.left = left;
               data.top = top;
               // 避免重复添加
@@ -965,6 +1003,7 @@ export default {
 
       // 检查是否显示重合连线放大节点的标识
       const { polylineTypeId, polylineIndex } = point;
+      const color = point.__attrs.lineAttr.stroke;
       const polylineObj = this.polylinePointList.find(v => v.polylineTypeId == polylineTypeId && v.polylineIndex == polylineIndex);
       polylineObj?.pointList.forEach(v => v.bringToFront());
       if (point.nextPoint) {
@@ -987,12 +1026,13 @@ export default {
             resetPointColor([obj], '#999');
             obj.line2?.set({ stroke: '#999' });
           } else {
-            resetPointColor([obj], polylineObj.color);
-            obj.line2?.set({ stroke: polylineObj.color });
+            const color = obj.__attrs.lineAttr.stroke;
+            resetPointColor([obj], color);
+            obj.line2?.set({ stroke: color });
           }
         });
         if ((point.line1 || point.line2) && left < originLeft + this.spaceWidth) {
-          setPointLineColor(point, polylineObj.color, true);
+          setPointLineColor(point, color, true);
         } else {
           setPointLineColor(point, 'transparent', true);
         }
@@ -1004,7 +1044,7 @@ export default {
         this.addPointList = this.addPointList.filter(v => v.left < left);
         const endLength = this.addPointList.length;
         if (endLength === 0) {
-          setPointLineColor(point, polylineObj?.color, conditionHasLine2);
+          setPointLineColor(point, color, conditionHasLine2);
           this.removePolyline('increasePointBatch', originLeft);
         }
         if (endLength > 0) {
@@ -1015,26 +1055,23 @@ export default {
       }
     },
     clonePoint(point, points) {
-      let evented, selectable, lineIndex, polylineIndex, lineAttr, polylineTypeId;
-      evented = selectable = false;
-      lineAttr = { ...point.lineAttr };
-      lineIndex = point.pointIndex;
-      polylineIndex = point.polylineIndex;
-      polylineTypeId = point.polylineTypeId;
+      const { lineIndex, polylineIndex, lineAttr, polylineTypeId, originLeft } = point;
+      const currentLineAttr = originLeft === points[2] && point.prevPoint ? point.prevPoint.__attrs.lineAttr : lineAttr;
+
       point.clone(clonedObj => {
         clonedObj.set({
           left: points[2],
           top: points[3],
           idClone: 'increasePointBatch',
-          id: '_polylinePoint_' + new Date().getTime(), // 此id必须，用于remove节点的时候
+          id: '_polylinePoint_',
           polylineTypeId,
-          polylineIndex: point.polylineIndex,
+          polylineIndex,
           scaleX: point.scale || 1,
           scaleY: point.scale || 1
         });
         clonedObj.hasControls = clonedObj.hasBorders = false;
         point.prePoints = [point.left, point.top];
-        const line = this.drawLine([...points], { evented, selectable, ...lineAttr, polylineIndex, polylineTypeId, lineIndex });
+        const line = this.drawLine([...points], { evented: false, selectable: false, ...currentLineAttr, polylineIndex, polylineTypeId, lineIndex });
         clonedObj.line1 = line;
         this.canvas.add(clonedObj);
         this.canvas.sendBackwards(line);
@@ -1045,7 +1082,7 @@ export default {
     getValue(point) {
       const x = this.getXValue(point.left);
       if (point.id) {
-        const data = this.getDataById(point.id);
+        const data = this.getDataByPoint(point);
         const position = data.position;
         const y = this.getYValue(position, point.top);
         return { data, x, y };
@@ -1160,9 +1197,8 @@ export default {
     // 关闭右键菜单，打开添加节点弹窗表单
     handleRightClick({ type, name }) {
       this.isRightVisible = false;
-      const id = this._currentPoint?.id;
       const { left, top } = this._active;
-      let data = id ? this.getDataById(id) : this.getValue({ left, top });
+      let data = this._currentPoint?.id ? this.getDataByPoint(this._currentPoint) : this.getValue({ left, top });
       if (type == 'add') {
         if (name.includes('左')) {
           data.range = {
@@ -1180,16 +1216,16 @@ export default {
       this.$emit('pointOperation', type, data);
       this._currentPoint = null;
     },
-    getDataById(id) {
-      const arr = id.replace(/_?[a-zA-Z]+.+$/, '').split('_');
+    getDataByPoint(point) {
+      const arr = point.id.replace(/_?[a-zA-Z]+.+$/, '').split('_');
       const [typeIndex, lineIndex, pointIndex] = arr;
       const data = this.polyline[typeIndex];
       const value = data?.dataList?.[lineIndex]?.list?.[pointIndex]?.data || '';
       return {
-        title: data?.dataList?.[lineIndex].title || '',
+        title: point.__attrs.title,
         position: data.position,
-        dataIndex: lineIndex,
-        pointIndex: pointIndex,
+        dataIndex: +lineIndex,
+        pointIndex: +pointIndex,
         data: value
       };
     },