cnhis-design-vue 0.1.32 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "0.1.32",
+  "version": "0.1.36",
   "description": "基于 Ant Desgin Vue 的UI库",
   "main": "lib/cui.umd.min.js",
   "keyword": "cnhis-design-vue vue cnhis antd vxe-table",

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

@@ -23,13 +23,16 @@
 
       <template v-else>
         <fabric-text-group
+          v-if="hasXScalevalue"
           :templateData="templateData"
+          :other="templateData.other"
           v-on="$listeners"
         ></fabric-text-group>
         <fabric-grid></fabric-grid>
-        <fabric-scale-value :templateData="templateData"></fabric-scale-value>
-        <fabric-lines ref="lines" :linesObj="templateData.top" v-on="$listeners"></fabric-lines>
+        <fabric-scale-value v-if="hasTable" :templateData="templateData"></fabric-scale-value>
+        <fabric-lines v-if="hasTopTable" ref="lines" :linesObj="templateData.top" v-on="$listeners"></fabric-lines>
         <fabric-polylines ref="polylines"
+          v-if="hasTable"
           :polyline="polylines"
           :other="templateData.left.other || {}"
           @pointOperation="pointOperation"
@@ -91,16 +94,27 @@ export default create({
   computed: {
     polylines() {
       const list = [];
-      if (this.templateData?.right && this.templateData.right.rightYScalevalue && Array.isArray(this.templateData.right.rightYScalevalue.dataList)) {
-        const position = this.templateData.right.position;
-        list.push({ position, ...this.templateData.right.rightYScalevalue });
+      if (this.templateData?.right?.rightYScalevalue?.dataList?.length) {
+        const { position, rightYScalevalue } = this.templateData.right;
+        list.push({ position, ...rightYScalevalue });
       }
-      if (this.templateData?.left && this.templateData.left.leftYScalevalue && Array.isArray(this.templateData.left.leftYScalevalue.dataList)) {
-        const position = this.templateData.left.position;
-        list.push({ position, ...this.templateData.left.leftYScalevalue });
+      if (this.templateData?.left?.leftYScalevalue?.dataList?.length) {
+        const { position, leftYScalevalue } = this.templateData.left;
+        list.push({ position, ...leftYScalevalue });
       }
       return list;
-    }
+    },
+    hasTopTable() {
+      return this.templateData.top?.list?.length > 0;
+    },
+    hasTable() {
+      const hasLeft = this.templateData.left?.leftYScalevalue?.list?.length > 0;
+      const hasRight = this.templateData.right?.rightYScalevalue?.list?.length > 0;
+      return this.hasXScalevalue && hasLeft && hasRight;
+    },
+    hasXScalevalue() {
+      return this.templateData.top?.xScalevalue?.list?.length > 0;
+    },
   },
   data() {
     return {

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

@@ -8,6 +8,10 @@
 <script>
 import { fabric } from 'fabric';
 
+const topSpaceHeight = 10; // templateData.top.spaceHeight
+const topSpaceGridNumber = 3; // templateData.top.xScalevalue.spaceGridNumber
+const leftSpaceGridNumber = 2; // templateData.left.leftYScalevalue.spaceGridNumber
+const rightSpaceGridNumber = 2; // templateData.right.rightYScalevalue.spaceGridNumber
 export default {
   name: 'FabricCanvas',
   props: {
@@ -72,14 +76,22 @@ export default {
       }
     };
   },
-  //   created() {
-  //     if (!this.templateData.top) {
-  //       throw ('缺少顶部数据对象, 无法生成水平方向刻度');
-  //     }
-  //     if (!this.templateData.left) {
-  //       throw ('缺少左侧数据对象, 无法生成垂直方向刻度');
-  //     }
-  //   },
+    created() {
+      if (!this.templateData.top) {
+        try {
+          throw new Error('缺少顶部数据对象, 无法生成水平方向刻度');
+        } catch (error) {
+          console.warn(error);
+        }
+      }
+      if (!this.templateData.left || !this.templateData.right) {
+        try {
+          throw new Error('缺少左/右侧数据对象, 无法生成垂直方向刻度');
+        } catch (error) {
+          console.warn(error);
+        }
+      }
+    },
   computed: {
     canvasWidth() {
       // 画布宽度
@@ -90,7 +102,7 @@ export default {
       return this.templateData.canvasHeight;
     },
     treeTableminCellWidth() {
-      return this.templateData.top?.treeTableminCellWidth || 20;
+      return this.templateData.top?.treeTableminCellWidth || this.templateData.left?.titleWidth || 20;
     },
     gridXNumber() {
       // 网格水平方向总数    如果设置了默认值就直接取用
@@ -98,58 +110,24 @@ export default {
         return this.templateData.table.mainXCell * this.templateData.table.subXCell;
       }
       // 如果没设置 就从顶部列表内自己计算一下 list遍历后将每一项完全展开后的数组长度存入topListLength取出最大值即可
-      // const topLenList = [];
-      // this.templateData.top.list.forEach(item => topLenList.push(item.flat(Infinity).length));
-      // return Math.max(...topLenList);
-      const spaceGridNumber = this.templateData.top.xScalevalue.spaceGridNumber || 3;
-      return this.templateData.top.xScalevalue.list.length * spaceGridNumber;
+      const spaceGridNumber = this.templateData.top?.xScalevalue?.spaceGridNumber || topSpaceGridNumber;
+      return (this.templateData.top?.xScalevalue?.list?.length || 1) * spaceGridNumber;
     },
     gridYNumber() {
       // 网格垂直方向总数
-      // if (this.templateData.table.mainYCell && this.templateData.table.subYCell) {
       return this.templateData.table.mainYCell * this.templateData.table.subYCell;
-      // }
-      // const leftLenList = [];
-      // this.templateData.left.list.forEach(item => {
-      //   if (isObject(item)) {
-      //     // 当前列内没有上下区分 左右区分针对item.list遍历即可 占用列数 => item.list.length 示例: 温度: 摄氏度 华氏度
-      //     leftLenList.push(item.list.length);
-      //   } else if (Array.isArray(item)) {
-      //     // 当前列内有上下之分 列数暂时默认 +1  ----- 若有更复杂情况（上下列中含有左右列的情况）可以改为递归形式
-      //     let len = 0;
-      //     item.forEach(v => (len += v.list.length));
-      //     leftLenList.push(len);
-      //   }
-      // });
-      // return Math.max(...leftLenList);
     },
     originX() {
       // 网格左侧起始坐标 X, 也是整个区域左侧列表坐标最大坐标值 取出初始化后网格区域水平方向多出的余数 添加到左栏宽度上
-      // let columns = 0;
-      // this.templateData.left.list.forEach(item => {
-      //   if (isObject(item)) { // 当前列内没有上下区分 左右区分针对item.list遍历即可 占用列数 => item.list.length 示例: 温度: 摄氏度 华氏度
-      //     columns += item.list.length;
-      //   } else if (Array.isArray(item)) { // 当前列内有上下之分 列数暂时默认 +1  ----- 若有更复杂情况（上下列中含有左右列的情况）可以改为递归形式
-      //     columns += 1;
-      //   }
-      // })
-      // const originX = this.templateData.left.width * columns;
-      // const residue = (this.endX - originX) % this.gridXNumber;
-      const originX = this.templateData.top.treeTableWidth;
+      const originX = this.templateData.top?.treeTableWidth || this.templateData.left?.width || 200;
       const residue = (this.endX - originX) % this.gridXNumber;
       return originX + residue;
     },
     originY() {
       // 顶部列表高度 网格不需要的高度放到顶部，因为底部不一定存在列表
-      // const height = this.templateData.top.height ? this.templateData.top.height : 30;
-      // const topheight = this.templateData.top.list.length * height;
-      // // const residue = (this.canvasHeight - topheight - this.endY) % this.gridYNumber; // 此处算法不对，会导致后面高度值计算出小数，造成表格重影
-      // const residue = (this.endY - topheight) % this.gridYNumber;
-      // return topheight + residue;
-
       const topHeight = this.endYTop;
       const residue = (this.endY - topHeight) % this.gridYNumber;
-      return topHeight + residue + this.templateData.top.spaceHeight;
+      return topHeight + residue + (this.templateData.top?.spaceHeight || topSpaceHeight);
     },
     endX() {
       // 网格区域水平方向最大坐标值, 也是整个画布右侧列表坐标起始值，网格右下角x轴坐标值
@@ -174,18 +152,18 @@ export default {
       // 头部表格底部空白位置的高，用于显示x轴时间点
       const topHeight = this.endYTop;
       const residue = (this.endY - topHeight) % this.gridYNumber;
-      return residue + this.templateData.top.spaceHeight;
+      return residue + (this.templateData.top?.spaceHeight || topSpaceHeight);
     },
     yCellHeightTop() {
       // 头部表格垂直方向网格高度
-      return this.templateData.top.treeTableminCellHeight;
+      return this.templateData.top?.treeTableminCellHeight || 20;
     },
     endYTop() {
       return this.gridYnumberTop * this.yCellHeightTop;
     },
     // 转换为时间戳的x轴时间列表
     xScaleList() {
-      const list = this.templateData.top.xScalevalue.list;
+      const list = this.templateData.top?.xScalevalue?.list || [];
       return list.map(item => {
         return new Date(item).getTime();
       })
@@ -217,13 +195,13 @@ export default {
     // },
     // y轴每mmHg的脉搏/血压的高度值
     yScaleCellLeft() {
-      const list = this.templateData.left.leftYScalevalue.list;
-      return this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / this.templateData.left.leftYScalevalue.spaceGridNumber);
+      const list = this.templateData.left?.leftYScalevalue?.list || [];
+      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.left?.leftYScalevalue?.spaceGridNumber || leftSpaceGridNumber)) : 10;
     },
     // y轴每摄氏度的高度值
     yScaleCellRight() {
-      const list = this.templateData.right.rightYScalevalue.list;
-      return this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / this.templateData.right.rightYScalevalue.spaceGridNumber);
+      const list = this.templateData.right?.rightYScalevalue?.list || [];
+      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.right?.rightYScalevalue?.spaceGridNumber || rightSpaceGridNumber)) : 10;
     },
     eventStyle() {
       return this.templateData.table?.eventStyle || {selectable: true,evented: true};
@@ -241,13 +219,15 @@ export default {
         ...this.canvasAttr
       });
 
-      this.getGridYnumberTop(this.templateData.top.list);
-      this.treeList = this.setTreeStyle(this.templateData.top.list);
+      if (this.templateData.top?.list?.length) {
+        this.getGridYnumberTop(this.templateData.top.list);
+        this.treeList = this.setTreeStyle(this.templateData.top.list);
+      }
     },
     getGridYnumberTop(list) {
       // 头部表格垂直方向网格总数
       for (let i = 0; i < list.length; i++) {
-        if (list[i].children && Array.isArray(list[i].children) && list[i].children.length > 0) {
+        if (list[i].children?.length) {
           this.getGridYnumberTop(list[i].children);
         } else {
           this.gridYnumberTop++;
@@ -262,26 +242,27 @@ export default {
      */
 
     setTreeStyle(list, levelCol = 0) {
-      let arr = [];
+      const arr = [];
+      const { treeTableminCellWidth, treeTableminCellHeight } = this.templateData.top;
       for (let i = 0; i < list.length; i++) {
-        let obj = {};
-        obj.title = list[i].title || '';
-        obj.left = levelCol * this.templateData.top.treeTableminCellWidth;
-        obj.top = this.levelRow * this.templateData.top.treeTableminCellHeight;
+        const obj = {};
+        Object.assign(obj, {
+          title: list[i].title || '',
+          left: levelCol * treeTableminCellWidth,
+          top: this.levelRow * treeTableminCellHeight
+        });
         this.levelRow++;
-        if (list[i].children && Array.isArray(list[i].children) && list[i].children.length > 0) {
-          obj.title = obj.title.split('').join('\n'); // 如果有子级则文字竖形排列
+        if (list[i].children?.length) {
           this.levelRow--;
-          obj.width = this.templateData.top.treeTableminCellWidth;
+          obj.title = obj.title.split('').join('\n'); // 如果有子级则文字竖形排列
+          obj.width = treeTableminCellWidth;
           obj.children = this.setTreeStyle(list[i].children, levelCol + 1);
           obj.subSize = this.getChildrenSize(list[i].children);
-          obj.height = obj.subSize * this.templateData.top.treeTableminCellHeight;
+          obj.height = obj.subSize * treeTableminCellHeight;
         } else {
           obj.width = this.originX - obj.left;
-          obj.height = this.templateData.top.treeTableminCellHeight;
-          obj.data = list[i].data;
-          obj.lineList = [...list[i].lineList];
-          obj.type = list[i].type;
+          obj.height = treeTableminCellHeight;
+          obj.lineList = JSON.parse(JSON.stringify(list[i].lineList));
         }
         arr.push(obj);
       }
@@ -290,7 +271,7 @@ export default {
     getChildrenSize(list) {
       let subSize = 0;
       for (let i = 0; i < list.length; i++) {
-        if (list[i].children && Array.isArray(list[i].children) && list[i].children.length > 0) {
+        if (list[i].children?.length) {
           subSize += this.getChildrenSize(list[i].children);
         } else {
           subSize += 1;

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

@@ -13,8 +13,8 @@ import DropPopup from '../components/DropPopup';
 import polylineCommon from '../mixins/polylineCommon';
 
 const rightClickNode = [
-  { name: '新增节点', type: 'add' },
-  { name: '删除节点', type: 'delete' }
+  { name: '修改', type: 'edit' },
+  { name: '删除', type: 'delete' }
 ];
 export default {
   name: 'fabric-lines',
@@ -65,9 +65,6 @@ export default {
   },
 
   methods: {
-    getContainer() {
-      return this.$el;
-    },
     init() {
       this.getLineList(this.linesObj.list);
       this.createLine();
@@ -113,7 +110,7 @@ export default {
       this.$nextTick(() => {
         if (id && id.includes('_lineGroup_')) {
           this._currentPoint = target || '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice(1));
+          this.rightClickNode = Object.freeze(rightClickNode.slice());
           this.isRightVisible = true;
         }
       });
@@ -124,7 +121,8 @@ export default {
       const line = this._currentPoint;
       this._currentPoint = '';
       const { lineObj } = this.updateData(line, true);
-      this.$emit('deleteLine', lineObj);
+      // editLine:编辑 deleteLine:删除
+      this.$emit(`${type}Line`, lineObj);
     },
     // 递归返回一维数据
     getLineList(list) {
@@ -143,14 +141,17 @@ export default {
       });
     },
     drawLineData(line, i) {
+      const lineList = line.lineList || [];
       const { originX, endX, xScaleList, yCellHeightTop } = this.propItems;
       const spaceHeight = Math.round(yCellHeightTop / 6);
       const minMinute = Math.min(...xScaleList);
       const maxMinute = Math.max(...xScaleList);
-      let lineItemList = [];
+      const lineItemList = [];
       const y1 = i * yCellHeightTop;
       const y2 = yCellHeightTop * (i + 1);
-      line.lineList.forEach((item, j) => {
+      let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
+      const textList = [];
+      lineList.forEach((item, j) => {
         if ( !item[0] || isObject(item[0])) return;
         const startMinute = new Date(item[0]).getTime();
         const endMinute = item[1] ? new Date(item[1]).getTime() : '';
@@ -158,6 +159,7 @@ export default {
         let x2 = this.cumputedX(item[1]);
         // 数字文字
         const textObj = item[3] || {};
+        const textContent = textObj.content || '';
 
         // 左边手柄竖线
         let leftLine;
@@ -220,17 +222,22 @@ export default {
 
         // 文字内容
         const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
-        const text =
+        let textLimitRight;
+        let text = 
           ((endMinute === '' && leftLine) || (item[1] && (!(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))))
-            ? this.drawLineText(textObj, textTop, i, j, centerLine, x1, x2)
+            ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, centerLine, x1, x2)
             : null;
-        // 文字内容超出则移除
+        // 文字内容居右侧竖线且超出当前线段右边界则移除
         if (text) {
-          if (text.left + text.width <= endX) {
-            this.hoverEvent(text, {textObj, startTime: item[0], endTime: item[1]});
-            lineItemList.push(text);
-          } else {
+          textLimitRight = lineList[j + 1]?.[0] && this.cumputedX(lineList[j + 1][0]) <= endX ? this.cumputedX(lineList[j + 1][0]) : endX;
+          if (text.originX === 'left' && text.left + text.width + 2 >= textLimitRight) {
+            textLimitRight !== endX && textArr.push(textContent);
             this.canvas.remove(text);
+            text = null;
+          } else {
+            textArr = [];
+            this.hoverEvent(text, {textObj, startTime: item[0], endTime: item[1]});
+            textList.push(text);
           }
         }
 
@@ -238,8 +245,8 @@ export default {
         let leftLimit = {};
         leftLimit.x2 = x2 ? x2 : endX;
         leftLimit.x1 = originX;
-        if (line.lineList[j - 1]) {
-          const [preItem0, preItem1] = line.lineList[j - 1];
+        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.cumputedX(preItem1);
@@ -251,25 +258,29 @@ export default {
         let rightLimt = {};
         rightLimt.x1 = x2 ? x1 : originX;
         rightLimt.x2 = endX;
-        if (line.lineList[j + 1]) {
-          const [preItem0] = line.lineList[j + 1];
+        if (lineList[j + 1]) {
+          const [preItem0] = lineList[j + 1];
           if (preItem0) {
             const preStartMinute = new Date(preItem0).getTime();
             if (preStartMinute > minMinute && preStartMinute <= maxMinute) rightLimt.x2 = this.cumputedX(preItem0);
           }
         }
 
-        this.lineEvent({line: leftLine, line1: centerLine, text, textObj, limitX: leftLimit, startTime: item[0], endTime: item[1]});
-        this.lineEvent({line: rightLine, line2: centerLine, text, textObj, limitX: rightLimt, startTime: item[0], endTime: item[1]});
+        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);
+      this.canvas.add(...lineItemList, ...textList);
       this.canvas.requestRenderAll();
     },
-    drawLineText(obj, top, i, j, centerLine, x1, x2) {
-      const channel = obj.channel ? `(${obj.channel})` : '';
-      const consistence = obj.consistence ? `(${obj.consistence})` : '';
-      const total = obj.total ? `(${obj.total})` : '';  
-      const value = `${obj.currentSpeed || ''}${channel}${consistence}${total}`;
+    drawLineText(textArr, top, i, j, centerLine, x1, x2) {
+      // const value = textArr.map(v => {
+      //   const channel = v.channel ? `(${v.channel})` : '';
+      //   const consistence = v.consistence ? `(${v.consistence})` : '';
+      //   const total = v.total ? `(${v.total})` : '';
+      //   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,
@@ -357,13 +368,15 @@ export default {
       });
     },
     lineEvent(attr) {
-      const {line, line1, line2, text, textObj, limitX, startTime, endTime} = attr;
+      const {line, line1, line2, text, textObj, limitX, startTime, endTime, preText, textLimitRight} = attr;
       if (line) {
         line.hasControls = line.hasBorders = false;
         line1 && (line.line1 = line1);
         line2 && (line.line2 = line2);
         text && (line.text = text);
         line.limitX = limitX;
+        preText && (line.preText = preText);
+        textLimitRight && (line.textLimitRight = textLimitRight);
         this.hoverEvent(line, {textObj, startTime, endTime});
         // 移动中 实时更新相关联的线的坐标
         line.on('moving', () => {
@@ -460,15 +473,13 @@ export default {
       return line;
     },
     lineMoveLimit(line) {
-      line.setCoords();
-      const objBoundingBox = line.getBoundingRect();
-      if (objBoundingBox.left < line.limitX.x1) {
+      line.setCoords(); // 需调用setCoords()才能重新计算控制位置(改变Object状态)
+      if (line.left < line.limitX.x1) {
         line.set('left', line.limitX.x1);
       }
-      if (objBoundingBox.left > line.limitX.x2) {
+      if (line.left > line.limitX.x2) {
         line.set('left', line.limitX.x2);
       }
-      line.setCoords();
     },
     lineMoveUpdateLine(line) {
       if (line.line1) {
@@ -482,22 +493,36 @@ export default {
     },
     textUpdatePositionX(line) {
       const text = line.text || null;
-      if (!text) return;
-      // 如果line2存在说明当前拖动的是右边手柄，line1存在则是左边手柄
-      const centerLine = line.line1 || line.line2 || null;
-      const left = line.left;
-      const limitWidth = text.width + 2;
-      let originX = text.originX;
-      let v;
-      if (centerLine?.x2 - centerLine?.x1 > limitWidth) {
-        v = left + (centerLine.width / 2) * (line.line2 ? -1 : 1);
-        originX = 'center';
-      } else {
-        v = this.textMarginLeft + (centerLine ? centerLine.x2 : left);
-        originX = 'left';
+      if (text) {
+        // 如果line2存在说明当前拖动的是右边手柄，line1存在则是左边手柄，都不存在说明不存在中间线
+        const centerLine = line.line1 || line.line2 || null;
+        const left = line.left;
+        const limitWidth = text.width + 2;
+        let originX = text.originX;
+        let v;
+        if (centerLine?.x2 - centerLine?.x1 > limitWidth) {
+          v = left + (centerLine.width / 2) * (line.line2 ? -1 : 1);
+          originX = 'center';
+        } else {
+          v = this.textMarginLeft + (centerLine ? centerLine.x2 : left);
+          originX = 'left';
+          // 移动到最右边界时候文字超出当前线段可拖动的右边界的情况
+          if (line.textLimitRight && v + limitWidth > line.textLimitRight) {
+            v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
+          }
+        }
+        text.setCoords();
+        text.set({ left: v, originX });
+      }
+      // 拖动左侧竖线时需要更改上一线段文字的位置，以防止文字被遮挡
+      const preText = line.preText || null;
+      if (!preText) return;
+      const limitWidth = preText.width + 2;
+      if (preText.originX === 'left' && preText.left + limitWidth > line.left) {
+        const v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
+        preText.setCoords();
+        preText.set({ left: v });
       }
-      text.setCoords();
-      text.set({ left: v, originX });
     },
     repaintLine() {
       if (this.lines.length) {

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

@@ -85,9 +85,6 @@ export default {
   },
 
   methods: {
-    getContainer() {
-      return this.$el;
-    },
     createEvent() {
       this.canvas.on('mouse:up', event => {
         if (event.button === 3) {
@@ -224,9 +221,10 @@ export default {
         const top = baseTop - i * lableLineHeight;
         const left = lableMargin[0] + treeTableminCellWidth;
         const pointId = `${v.polylineTypeId}_${v.polylineIndex}_-1_polylinePoint_'${new Date().getTime()}_isTitle`;
+        const { fill: fillColor = '#000', stroke } = v.pointAttr;
         let text = new this.fabric.Text(String(v.title), {
           fontSize: style.fontSize,
-          fill: v.pointAttr.stroke || '#000',
+          fill: fillColor && stroke ? stroke : fillColor,
           left,
           top,
           originY: 'center',
@@ -682,11 +680,12 @@ export default {
         if (id && id.includes('_polylinePoint_')) {
           this._currentPointId = id;
           this.rightClickNode = Object.freeze(rightClickNode.slice());
-        } else {
+          this.isRightVisible = true;
+        } else if (!id) {
           this._currentPointId = '';
           this.rightClickNode = Object.freeze(rightClickNode.slice(0, 1));
+          this.isRightVisible = true;
         }
-        this.isRightVisible = true;
       });
     },
     // 关闭右键菜单，打开添加节点弹窗表单