cnhis-design-vue 2.1.63 → 2.1.65

package/package.json

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

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

@@ -44,7 +44,7 @@
     </div>
     <c-grid
       border
-      show-overflow
+      :show-overflow="isShowOverflow"
       show-header-overflow
       highlight-hover-row
       highlight-current-row
@@ -88,8 +88,8 @@
       }"
       :row-style="getRowStyle"
       :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
-      :scroll-x="{ gt: 25 }"
-      :scroll-y="{ gt: 50, mode: 'wheel' }"
+      :scroll-x="scrollXConfig"
+      :scroll-y="scrollYConfig"
       :expand-config="{
         lazy: true,
         accordion: columnConfig && columnConfig.accordion,
@@ -265,7 +265,10 @@ export default create({
         del: 'close'
       },
       tableHeight: '100%',
-      allCheckedRows: []
+      allCheckedRows: [],
+      scrollXConfig: { enabled: true, gt: 25 },
+      scrollYConfig: { enabled: true, gt: 50, mode: 'wheel' },
+      isShowOverflow: true
     };
   },
   computed: {
@@ -1238,11 +1241,17 @@ export default create({
       // 配置列表
       let { selectType } = this.getOtherConfigInit() || {};
       let { tableNoSetting } = this;
-      let { isBatchSelect, fieldList, showButtonTop, isScanMultiTable } = map;
+      let { isBatchSelect, fieldList, showButtonTop, isScanMultiTable, autoCellHeight } = map;
       if (selectType) {
         // 有设置 selectType 强制可选。
         isBatchSelect = 1;
       }
+      // 如果表格单行需要内容撑开, 则把虚拟滚动关掉
+      if (autoCellHeight) {
+        this.scrollXConfig.enabled = false;
+        this.scrollYConfig.enabled = false;
+        this.isShowOverflow = false;
+      }
       selectType = selectType || 'checkbox';
       // 扫码弹框 设置为radio
       let { listType } = this.tableOptions;
@@ -1400,6 +1409,8 @@ export default create({
     },
     // 2022/12/1 沈培均/方晶晶要求新增 如果有自定义提示就不显示表格自带的提示
     handleShowOverflow(item) {
+      // 2023/03/17 新增单行高度由内容撑开, 不需要缺省
+      if (!this.isShowOverflow) return false
       if (item.columnName == "operatorColumn") return false;
       // 选人组件 自己的tooltip
       if (item.attrType === "CANDIDATE_COMPONENTS") return false;

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

@@ -144,9 +144,9 @@ export default {
     },
     endY() {
       // 画布高度 - 底部列表高度 ，网格右下角y轴坐标值
-      if (!this.templateData.bottom) return this.templateData.canvasHeight;
-      const endHeight = this.templateData.bottom.height || 30;
-      return this.canvasHeight - endHeight;
+      const { show = true, height } = this.templateData.bottom || {};
+      if (!show || !height) return this.templateData.canvasHeight;
+      return this.canvasHeight - height;
     },
     xCellWidth() {
       // 水平方向网格宽度

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

@@ -181,7 +181,7 @@ export default {
         // 左边手柄竖线
         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 ? true : false, isContinue });
+          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;
@@ -233,7 +233,7 @@ export default {
         // 右边手柄竖线
         let rightLine;
         if (item[1] && endMinute <= maxMinute && endMinute >= minMinute) {
-          rightLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right' });
+          rightLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right', isContinue });
           lineItemList.push(rightLine);
         }
 
@@ -355,7 +355,6 @@ export default {
         left = x2 - this.propItems.xCellWidth / 2;
       }
       let line;
-      let arrow;
       const common = {
         selectable: false,
         evented: false
@@ -380,23 +379,23 @@ export default {
           ...common
         });
       } else {
-        line = this.drawLine(point, {
-          ...dataLineStyle,
-          ...common
-        });
-        arrow = isContinue
-          ? await this.ceateLineArrow({
-              left: x1,
-              top: y1 + (y2 - y1) / 2,
-              originY: 'center',
-              width: 14,
-              height: 5,
-              arrowwidth: 6,
-              arrowheight: 5,
+        line = isContinue
+          ? await this.createArrow({
+              left: x2,
+              top: y1 + (y2 - y1) / 2 - 3.5,
+              originY: 'bottom',
+              originX: 'right',
+              fill: 'transparent',
+              width: 7,
+              height: 7,
+              angle: 270,
               ...dataLineStyle,
               ...common
             })
-          : null;
+          : this.drawLine(point, {
+              ...dataLineStyle,
+              ...common
+            });
       }
       const rect = new this.fabric.Rect({
         width: this.propItems.xCellWidth,
@@ -408,7 +407,7 @@ export default {
         evented: false
       });
 
-      return new this.fabric.Group([line, rect, ...(arrow ? [arrow] : [])], {
+      return new this.fabric.Group([line, rect], {
         selectable: true,
         evented: true,
         originX: 'center',
@@ -418,6 +417,7 @@ export default {
         colIndex: j,
         ...this.eventStyle,
         ...others,
+        isContinue,
         lockMovementY: true // 锁定Y轴，即只能x轴方向移动
       });
     },
@@ -497,13 +497,13 @@ export default {
     // 移动手柄竖线后，需要更新this.lines，便于后面重新渲染时重新计算其左右限制坐标点
     updateData(line, isHover) {
       if (!line) return;
-      const { rowIndex, colIndex, position, left } = line;
+      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(left);
+      const x = this.getXValue(isContinue ? left + 0.5 : left);
       if (position === 'left') {
         linesRow.lineList[colIndex][0] = x;
       } else {

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

@@ -85,7 +85,9 @@ export default {
       selectArea: null, // 选区矩形对象
       currentDelPoint: null, // 缓存当前可批量删除的项目线段上的点
       polylinePointList: [], // 缓存折线项目节点
-      isMovingToOtherTarget: false
+      isMovingToOtherTarget: false,
+      interval: null,
+      flickerablePoints: [] // 记录需要闪烁的节点
     };
   },
   computed: {
@@ -114,11 +116,12 @@ export default {
     init() {
       this.drawPolylineTitle();
       this.polylinePointList = [];
+      this.flickerablePoints = [];
       this.polyline.forEach((polylineType, polylineTypeId) => {
         this.createPolyline(polylineType, polylineTypeId);
       });
-
       this.eventStyle.evented && this.createEvent();
+      this.setFlicker();
     },
     createEvent() {
       this.canvas.on('mouse:up', event => {
@@ -424,15 +427,27 @@ export default {
       const getTime = new Date(time).getTime();
       return getTime >= minMinute && getTime <= maxMinute;
     },
+    // 设置节点闪烁
+    setFlicker() {
+      setTimeout(() => {
+        if (this.interval) clearInterval(this.interval);
+        if (this.flickerablePoints?.length) {
+          this.interval = setInterval(() => {
+            this.flickerablePoints.forEach(o => o?.set('opacity', o.opacity === 1 ? 0.5 : 1));
+            this.canvas.renderAll();
+          }, 800);
+        }
+      });
+    },
     // 创建危急值和差异值
-    createAttrVaule(attr, polyline, polylineIndex, polylineType, polylineTypeId) {
+    createAttrVaule({ attr, polyline, polylineIndex, polylineType, polylineTypeId }) {
       const { list } = polyline;
-      const valueObj = polyline[attr] || {};
-      if (!valueObj.max && !valueObj.min) return;
+      const { max, min } = polyline[attr] || {};
+      if (!max && !min) return;
 
       const { originX, endX } = this.propItems;
-      const isMax = valueObj.max?.show && valueObj.max?.value && list.some(v => +v.value >= +valueObj.max.value && this.isLimit(v.time));
-      const isMin = valueObj.min?.show && valueObj.min?.value && list.some(v => +v.value <= +valueObj.min.value && this.isLimit(v.time));
+      const isMax = max?.show && max?.value && list.some(v => +v.value >= +max.value && this.isLimit(v.time));
+      const isMin = min?.show && min?.value && list.some(v => +v.value <= +min.value && this.isLimit(v.time));
       const lines = [];
 
       const drawLine = ({ value, lineStyle }) => {
@@ -449,21 +464,21 @@ export default {
           top: top - 5
         });
       };
+      const isDraw = (isMaxOrMin, maxOrMin) => isMaxOrMin && (!maxOrMin?.flickerable || attr !== 'critical');
 
-      if (isMax) {
-        const line = drawLine(valueObj.max);
-        const text = drawText(valueObj.max, line.top);
+      if (isDraw(isMax, max)) {
+        const line = drawLine(max);
+        const text = drawText(max, line.top);
         line.text = text;
         lines.push(line, text);
       }
-      if (isMin) {
-        const line = drawLine(valueObj.min);
-        const text = drawText(valueObj.min, line.top);
+      if (isDraw(isMin, min)) {
+        const line = drawLine(min);
+        const text = drawText(min, line.top);
         line.text = text;
         lines.push(line, text);
       }
       this.canvas.add(...lines);
-      // this.canvas.renderAll();
     },
     /**
      * 绘制一条折线
@@ -475,10 +490,9 @@ export default {
      */
     drawPolyline(polyline, polylineIndex, polylineType, polylineTypeId) {
       const { originY, endY } = this.propItems;
-      const { pointAttr, lineAttr } = polyline;
+      const { pointAttr, lineAttr, list = [], critical = {} } = polyline;
       this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
 
-      const list = polyline.list;
       const pointList = [];
       let lineList = [];
       const _this = this;
@@ -493,6 +507,7 @@ export default {
         }
         return { isInit, points };
       }
+      this.flickerablePoints = this.flickerablePoints.filter(point => point.polylineTypeId !== polylineTypeId && point.polylineIndex !== polylineIndex);
       list.forEach((linePoints, index) => {
         // 当前点
         let { points, isInit } = getPointer(linePoints);
@@ -511,7 +526,8 @@ export default {
           Object.assign(pointOthers, {
             originLeft: points[0],
             originTop: points[1],
-            time: linePoints.time
+            time: linePoints.time,
+            __value: linePoints.value
           });
           point = previousLine ? this.drawPoint(...points, previousLine, line, polyline.type, pointOthers, isInit) : this.drawPoint(...points, null, line, polyline.type, pointOthers, isInit);
         }
@@ -548,11 +564,24 @@ export default {
           return v;
         });
         this.canvas.add(...lineList, ...res);
-        // this.canvas.requestRenderAll();
+
+        // 缓存需要闪烁的节点
+        const { max, min } = critical;
+        if (max?.flickerable || min?.flickerable) {
+          const maxVal = max?.value;
+          const minVal = min?.value;
+          if (maxVal && max?.flickerable) {
+            this.flickerablePoints.push(...res.filter(point => +point.__value >= +maxVal));
+          }
+          if (minVal && min?.flickerable) {
+            this.flickerablePoints.push(...res.filter(point => +point.__value <= +minVal));
+          }
+        }
       });
 
-      this.createAttrVaule('critical', polyline, polylineIndex, polylineType, polylineTypeId);
-      this.createAttrVaule('diffValue', polyline, polylineIndex, polylineType, polylineTypeId);
+      const params = { polyline, polylineIndex, polylineType, polylineTypeId };
+      this.createAttrVaule({ ...params, attr: 'critical' });
+      this.createAttrVaule({ ...params, attr: 'diffValue' });
     },
     // 计算y轴坐标
     cumputedY(polylineType, linePointY) {
@@ -1134,6 +1163,7 @@ export default {
           this.removePolyline();
         }
         this.polylinePointList = [];
+        this.flickerablePoints = [];
         this.polyline.forEach((polylineType, polylineTypeId) => {
           this.createPolyline(polylineType, polylineTypeId);
         });
@@ -1145,6 +1175,10 @@ export default {
         this.drawPolyline(this.polyline[polylineTypeId].dataList[parseInt(dadaIndex)], parseInt(dadaIndex), this.polyline[polylineTypeId], polylineTypeId);
       }
     }
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+    this.interval = null;
   }
 };
 </script>

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

@@ -45,11 +45,8 @@ export default {
     // x轴时间刻度绘制
     topScaleValue(obj) {
       const { originX, originY, xCellWidth, originYTime, spaceHeight } = this.propItems;
-      const spaceGridNumber = obj.xScalevalue.spaceGridNumber || 3;
-      const defaultSpaceMinute = obj.xScalevalue.defaultSpaceTime || 15;
+      const { spaceGridNumber = 3, defaultSpaceTime: defaultSpaceMinute = 15, style = {}, customStyle = {} } = obj.xScalevalue || {};
       const defaultSpaceTime = defaultSpaceMinute * 60 * 1000;
-      const style = obj.xScalevalue.style || {};
-      const customStyle = obj.xScalevalue.customStyle || {};
       const top = originYTime + Math.floor(spaceHeight / 2);
       let textList = [];
       const list = obj.xScalevalue.list || [];
@@ -73,18 +70,19 @@ export default {
     },
     rightScaleValue(obj) {
       if (!obj) return;
-      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 : {};
+      const { spaceGridNumber = 2, marginLeft = 3, style = {}, list = [], unit } = obj.rightYScalevalue || {};
+      const { endX, endY, yCellHeight } = this.propItems;
+      const _originX = endX + marginLeft;
       let textList = [];
-      obj.rightYScalevalue.list.forEach((item, index) => {
-        textList.push(this.createText(item, originX, this.propItems.endY - index * this.propItems.yCellHeight * spaceGridNumber, 'left', style));
+      list.forEach((item, index) => {
+        const numObj = this.createText(item, _originX, endY - index * yCellHeight * spaceGridNumber, 'left', style);
+        index === 0 && this.setOverFlowPoint(numObj);
+        textList.push(numObj);
       });
       // 添加单位
-      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));
+      if (unit) {
+        const top = endY - list.length * yCellHeight * spaceGridNumber + yCellHeight;
+        textList.push(this.createText(unit, _originX, top, 'left', style));
       }
       const group = new this.fabric.Group([...textList], {
         evented: false,
@@ -94,23 +92,22 @@ export default {
       this.canvas.sendBackwards(group);
     },
     leftScaleValue(obj) {
-      const { endY, yCellHeight } = this.propItems;
-      const spaceGridNumber = obj.leftYScalevalue.spaceGridNumber || 2;
-      const [titleMarginRight, titleMarginButton] = obj.leftYScalevalue?.titleMargin || [5, 30];
-      const listMarginRight = obj.leftYScalevalue.listMarginRight || 3;
-      const style = obj.leftYScalevalue.style || {};
-      const originX = this.propItems.originX;
+      const { spaceGridNumber = 2, titleMargin = [5, 30], listMarginRight = 3, style = {}, list = [], name, unit } = obj.leftYScalevalue || {};
+      const { originX, endY, yCellHeight } = this.propItems;
+      const [titleMarginRight, titleMarginButton] = titleMargin;
       let textList = [];
-      obj.leftYScalevalue.list.forEach((item, index) => {
-        textList.push(this.createText(item, originX - listMarginRight, endY - index * yCellHeight * spaceGridNumber, 'right', style));
+      list.forEach((item, index) => {
+        const numObj = this.createText(item, originX - listMarginRight, endY - index * yCellHeight * spaceGridNumber, 'right', style);
+        index === 0 && this.setOverFlowPoint(numObj);
+        textList.push(numObj);
       });
 
       // 添加标题和单位
       let txt = '';
-      txt = obj.leftYScalevalue.name || '';
-      if (obj.leftYScalevalue.unit) txt += '\n' + obj.leftYScalevalue.unit;
+      txt = name || '';
+      if (unit) txt += '\n' + unit;
       if (txt) {
-        const top = endY - (obj.leftYScalevalue.list.length - 1) * yCellHeight * spaceGridNumber - titleMarginButton;
+        const top = endY - (list.length - 1) * yCellHeight * spaceGridNumber - titleMarginButton;
         textList.push(this.createText(txt, originX - titleMarginRight, top, 'right', { ...style, textAlign: 'right', originY: 'bottom' }));
       }
       const group = new this.fabric.Group([...textList], {
@@ -120,6 +117,10 @@ export default {
       this.canvas.add(group);
       this.canvas.sendBackwards(group);
     },
+    setOverFlowPoint(point) {
+      const { endY, canvasHeight } = this.propItems;
+      endY === canvasHeight && point.set('top', point.top - point.height / 2);
+    },
     createText(text, left, top, originX, style) {
       return new this.fabric.Text(String(text), {
         ...this.defaultTextStyle,

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

@@ -264,18 +264,23 @@ export default {
         if (list[index - 1]) {
           top += item.lineHeight || 15;
         }
-
+        const originOptions = { originX: 'right', left, top };
         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()}`
+          id: `${index}_other_${Date.now()}`,
+          dataIndex: index,
+          type: 'list',
+          hasControls: false,
+          hasBorders: false,
+          ...originOptions,
+          ...this.eventStyle,
+          dataList: []
         });
+        this.setMovingEvent(title, originOptions);
         textList.push(title);
         const { icon: _icon = { type: 'circle' }, dataList } = item || {};
         for (let i = 0, len = dataList.length; i < len; i++) {
@@ -288,9 +293,11 @@ export default {
               index: i,
               type: 'list'
             };
+            const left = this.cumputedX(v.time);
+            title.dataList.push(left);
             const icon = await this.createPoint(_icon.type, {
               originX: 'center',
-              left: this.cumputedX(v.time),
+              left,
               ...item.style,
               ...(item.style ? { stroke: item.style.fill } : {}),
               ...(_icon.style || {}),
@@ -300,7 +307,7 @@ export default {
               ...defaultVaule.style,
               ...defaultVaule.textStyle,
               ...item.style,
-              left: icon.left + icon.width / 2,
+              left: left + icon.width / 2,
               name: v.value,
               ...commonOptions
             });
@@ -309,7 +316,8 @@ export default {
               lockMovementX: true,
               lockMovementY: true,
               ...commonOptions,
-              ...this.eventStyle
+              ...this.eventStyle,
+              realLeft: left
             });
             groupObj.hasControls = groupObj.hasBorders = false;
             this.setPopup(groupObj);
@@ -319,6 +327,52 @@ export default {
       }
       this.canvas.add(...textList);
     },
+    setMovingEvent(point) {
+      const { originX, originY, endX, endY } = this.propItems;
+      const isLimit = () => point.left >= originX && point.left <= endX && point.top >= originY && point.top <= endY;
+      let cloneObj;
+      point.on('moving', () => {
+        point.set('originX', 'center');
+        !point.isClone &&
+          point.clone(obj => {
+            obj.set('originX', 'right');
+            this.canvas.add(obj);
+            cloneObj = obj;
+            point.isClone = true;
+          });
+        if (isLimit()) {
+          Bus.$emit('mouseoverTarget', true);
+          this.showDrapPopup(point, true);
+        } else {
+          !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
+          this.isDropVisible = false;
+        }
+      });
+      point.on('moved', () => {
+        this.canvas.remove(cloneObj);
+        point.isClone = false;
+        this.removeOther();
+        this.drawTextDataGroup(this.templateData.other);
+        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
+        this.isDropVisible = false;
+        if (isLimit()) {
+          const { type, dataIndex, left, dataList } = point;
+          const time = this.getXValue(left);
+          const index = dataList.findIndex(_left => _left > left);
+          // 使用定时器，是因为：防止上方移除重绘过慢新增完后再次触发移除重绘导致页面多次重绘节点
+          setTimeout(() => {
+            this.$emit('addOhter', {
+              type,
+              dataIndex,
+              index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index,
+              data: {
+                time
+              }
+            });
+          });
+        }
+      });
+    },
     setPopup(point) {
       point.on('mouseover', () => {
         Bus.$emit('mouseoverTarget', true);
@@ -346,10 +400,11 @@ export default {
     },
     // 底部标记
     drawBottomTextDataGroup(obj) {
-      if (!obj.list) {
+      const { endX, originX, endY, canvasHeight, topTotal } = this.propItems;
+      if (!obj.list || endY === canvasHeight) {
         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;
@@ -546,7 +601,7 @@ export default {
         top: point.top,
         margin: { top: this.propItems.yCellHeight }
       };
-      const x = arguments.length > 1 && point.other?.viewTime ? point.other.viewTime : this.getXValue(point.left);
+      const x = arguments.length > 1 && point.other?.viewTime ? point.other.viewTime : this.getXValue(point.realLeft || point.left);
       this.dropVal = {
         title: point.name || '',
         list: [{ id: '1', name: '时间', value: x }]

package/packages/scale-view/scaleView.vue

@@ -406,6 +406,7 @@ export default create({
       return function (item) {
         let { type } = item || {};
         let tempTile = this.config?.autoQuestionNumber === false ? item.showTitle : `${item.softcode}、${item.showTitle}`;
+        tempTile = this.html2Escape(tempTile);
         if (!this.isEvaluation(type)) return tempTile;
 
         let score = this.handleEvaluationScore(item);
@@ -1848,6 +1849,12 @@ export default create({
     handleEvaluationScore(ele) {
       let { minScore = 0, maxScore = 0, scoreType } = ele.scoreConfigs || {};
       return `(${maxScore}分)`;
+    },
+    html2Escape(sHtml) {
+      if(!sHtml || typeof sHtml != 'string') return sHtml;
+      return sHtml.replace(/[<>&"]/g,function(c){
+        return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];
+      });
     }
   }
 });