cnhis-design-vue 2.0.17 → 2.0.19-beta.2

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

@@ -2,7 +2,7 @@
   <div class="poly-line">
     <MouseRightClick v-if="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
 
-    <DropPopup v-if="isDropVisible" :val="dropVal" :dropPos="dropPos" />
+    <DropPopup v-show="isDropVisible" :val="dropVal" :dropPos="dropPos" />
   </div>
 </template>
 
@@ -23,7 +23,7 @@ const rightClickNode = [
   { name: '删除节点', type: 'delete' }
 ];
 const rightClickNodeConnect = [
-  { name: '新增节点连接右侧节点', type: 'add',  },
+  { name: '新增节点连接右侧节点', type: 'add' },
   { name: '新增节点连接左侧节点', type: 'add' }
 ];
 export default {
@@ -64,8 +64,7 @@ export default {
     }
   },
 
-  watch: {
-  },
+  watch: {},
 
   mounted() {
     this.$nextTick(() => {
@@ -160,7 +159,7 @@ export default {
       const maxTime = Math.max(...xScaleList);
       this.polyline.forEach((item, index) => {
         item.dataList.forEach((v, i) => {
-           // 配置是否可拖动标题图标批量增加-
+          // 配置是否可拖动标题图标批量增加-
           const isAdd = v.list.length
             ? !v.list.some(k => {
                 return isEffectiveNode(k) && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() < xScaleCellList[1].time;
@@ -264,12 +263,11 @@ export default {
         let originTop = top;
         let cloneIconId;
         icon.on('moving', () => {
-          
           // 优化左侧图标太小不容易选中的问题
           if (!icon.url && icon.scaleX == 1.8 && icon.scaleY == 1.8) {
             icon.set({
-              'scaleX': 1,
-              'scaleY': 1
+              scaleX: 1,
+              scaleY: 1
             });
             this.canvas.renderAll();
           }
@@ -376,7 +374,7 @@ export default {
       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 lines = [];
-      
+
       const drawLine = ({ value, lineStyle }) => {
         const top = this.cumputedY(polylineType, +value);
         return this.drawLine([originX, top, endX, top], { polylineIndex, lineIndex: 0, polylineTypeId, ...(lineStyle || defaultVaule.criticalStyle) });
@@ -447,7 +445,7 @@ export default {
         let point;
         let previousLine;
 
-        line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex, lineIndex: index, ...lineAttr }) : null;
+        line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex, polylineTypeId, lineIndex: index, ...lineAttr }) : null;
         previousLine = lineList[index - 1];
         const pointOthers = { polylineTypeId, polylineIndex, pointIndex: index, ...pointAttr, lineAttr };
         if (points) {
@@ -512,6 +510,19 @@ export default {
       line2 && (point.line2 = line2);
       point.on('mouseover', () => {
         this.showDrapPopup(point);
+        // 将当条线段以及点层级置顶
+        // 线段不能先置顶，会挡住其他线段上的点
+        // this.canvas.forEachObject(obj => {
+        //   if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
+        //     obj.line1 && this.canvas.bringToFront(obj.line1);
+        //     obj.line2 && this.canvas.bringToFront(obj.line2);
+        //   }
+        // });
+        this.canvas.forEachObject(obj => {
+          if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
+            this.canvas.bringToFront(obj);
+          }
+        });
       });
       point.on('mouseout', () => {
         this.isDropVisible = false;
@@ -533,7 +544,7 @@ export default {
           }
         });
       }
-      
+
       // 超出表格最高或最低值则需要触发pointChange事件并且不能更新视图，否则连接节点判断不会成功
       isInit && this.setEmitFunction(point, isInit);
 
@@ -631,7 +642,7 @@ export default {
                     let cloneObj = JSON.parse(JSON.stringify(pointObj));
                     cloneObj.value.time = this.getXValue(curLeft);
                     cloneObj.left = curLeft;
-                    this.addPointList.splice(index, 0 , cloneObj);
+                    this.addPointList.splice(index, 0, cloneObj);
                   }
                 }
               }
@@ -644,12 +655,12 @@ export default {
         if (left > originLeft) {
           point.line1 && this.removePolyline(point.line1.id);
           // if (i === 1) {
-            this.addPointList.length == 0 && await this.clonePoint(point, [point.line1 ? point.line1.x1 : originLeft, point.line1 ? point.line1.y1 : originTop, originLeft, originTop]);
+          this.addPointList.length == 0 && (await this.clonePoint(point, [point.line1 ? point.line1.x1 : originLeft, point.line1 ? point.line1.y1 : originTop, originLeft, originTop]));
           // }
           if (this.addPointList.every(v => v.left !== left)) {
             // const points1 = i === 1 ? [originLeft, originTop] : point.prePoints;
             const points1 = this.addPointList.length == 0 ? [originLeft, originTop] : point.prePoints;
-            points1 && await this.clonePoint(point, [...points1, left, top]);
+            points1 && (await this.clonePoint(point, [...points1, left, top]));
             // this.setAddPointList(point);
             // 调用上面方法就会导致线段绘制失败，目前还不知道为啥子
             const { data, x, y } = this.getValue(point);
@@ -719,7 +730,7 @@ export default {
           this.canvas.renderAll();
           resolve(clonedObj);
         });
-      })
+      });
     },
     getValue(point) {
       const x = this.getXValue(point.left);
@@ -750,12 +761,17 @@ export default {
       const lineId = `${others.lineIndex}_${others.polylineIndex}_polylineLine_${new Date().getTime()}`;
       const line = new this.fabric.Line(lines, {
         id: lineId,
-        hoverCursor: 'pointer',
-        objectCaching: false,
+        hoverCursor: 'default',
+        // objectCaching: false,
         selectable: false,
         evented: false,
         ...others
       });
+      // line.hasControls = line.hasBorders = false;
+      // line.on('mouseover', () => {
+      //   // 将当条线段以及点层级置顶
+      //   // 此处有问题，线段定位是斜角形成的整个矩形，会挡住其他点或线段的mouseover事件
+      // });
 
       return line;
     },
@@ -763,14 +779,15 @@ export default {
       this.isDropVisible = true;
       this.dropPos = {
         left: point.left,
-        top: point.top
+        top: point.top,
+        margin: { top: this.propItems.yCellHeight }
       };
       let { x, y, data } = this.getValue(point);
       const getY = y => {
         if (data?.position == 'right') {
           if (y.toString().includes('.')) {
             const [m, n] = y.toString().split('.');
-            return parseFloat(`${m}.${n.slice(0, 1)}`) * 10 / 10;
+            return (parseFloat(`${m}.${n.slice(0, 1)}`) * 10) / 10;
           }
           return y;
         } else {
@@ -820,7 +837,12 @@ export default {
               nodeConnect = rightClickNodeConnect.slice();
             }
           }
-          this.rightClickNode = Object.freeze(rightClickNode.slice(0, 1).concat(nodeConnect).concat(rightClickNode.slice(-1)));
+          this.rightClickNode = Object.freeze(
+            rightClickNode
+              .slice(0, 1)
+              .concat(nodeConnect)
+              .concat(rightClickNode.slice(-1))
+          );
           this.isRightVisible = true;
         } else if (!id) {
           const { operable } = this.propItems;
@@ -866,6 +888,12 @@ export default {
         data: value
       };
     },
+    isOnePolyLine(obj, polylineTypeId, polylineIndex) {
+      // 排除左侧标题
+      const isPolyLine = obj.polylineTypeId === polylineTypeId && obj.polylineIndex === polylineIndex;
+      if (obj.id && /_polyline(Point|Line)_/.test(obj.id) && !obj.id.includes('isTitle') && isPolyLine) return true;
+      return;
+    },
     removePolyline(id, left, position, polylineIndex) {
       // 根据id或者idClone删除
       if (id) {
@@ -888,8 +916,7 @@ export default {
       if (position && (polylineIndex === 0 || polylineIndex)) {
         const polylineTypeId = this.polyline.findIndex(v => v.position === position);
         this.canvas.forEachObject(obj => {
-          const isPolyLine = obj.polylineTypeId === polylineTypeId && obj.polylineIndex === polylineIndex;
-          if (obj.id && /_polyline(Point|Line)_/.test(obj.id) && !obj.id.includes('isTitle') && isPolyLine) {
+          if (this.isOnePolyLine(obj, polylineTypeId, polylineIndex)) {
             obj.text && this.canvas.remove(obj.text);
             obj.line1 && this.canvas.remove(obj.line1);
             obj.line2 && this.canvas.remove(obj.line2);

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

@@ -1,10 +1,18 @@
+<template>
+  <TimeScaleValue v-if="templateData.top.xScalevalue.popupTop" :times="timeList" :templateData="templateData" />
+</template>
+
 <script>
 import fabricCommon from '../mixins/fabricCommon';
 import defaultVaule from '../const/defaultVaule';
+import TimeScaleValue from '../components/TimeScaleValue.vue';
 
 export default {
   name: 'fabric-scale-value',
   mixins: [fabricCommon],
+  components: {
+    TimeScaleValue
+  },
   props: {
     templateData: {
       type: Object,
@@ -13,6 +21,7 @@ export default {
   },
   data() {
     return {
+      timeList: []
     };
   },
   computed: {
@@ -21,8 +30,8 @@ export default {
         ...defaultVaule.textStyle,
         centeredRotation: true,
         originX: 'center',
-        originY: 'center',
-      }
+        originY: 'center'
+      };
     }
   },
   mounted() {
@@ -47,9 +56,16 @@ export default {
       const list = obj.xScalevalue.list || [];
       list.reduce((pre, cur, i) => {
         const newStyle = pre && new Date(cur).getTime() - new Date(pre).getTime() < defaultSpaceTime ? { ...style, ...customStyle } : style;
-        textList.push(this.createText(cur.slice(-5), originX + i * spaceGridNumber * xCellWidth, top, 'center', newStyle));
+        const text = this.createText(cur.slice(-5), originX + i * spaceGridNumber * xCellWidth, top, 'center', newStyle);
+        textList.push(text);
+        this.timeList.push({
+          time: cur.slice(-5),
+          left: originX + i * spaceGridNumber * xCellWidth,
+          width: text.width
+        });
         return cur;
       }, '');
+      console.log(textList);
       const group = new this.fabric.Group([...textList], {
         evented: false,
         selectable: false
@@ -112,9 +128,6 @@ export default {
         originX
       });
     }
-  },
-  render(h) {
-    return this.$slots.default ? h('div', this.$slots.default) : undefined;
   }
 };
 </script>

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

@@ -41,7 +41,7 @@ export default {
     templateData: {
       type: Object,
       required: true
-    },
+    }
   },
   watch: {
     'templateData.other': {
@@ -384,9 +384,23 @@ export default {
                 ele: ele || '',
                 ...option
               });
+              // 标记增加序号
+              if (v.other?.number) {
+                const text = new this.fabric.Text(String(v.other?.number?.value || ''), {
+                  ...defaultVaule.textStyle,
+                  ...common,
+                  ...(v.other?.number?.style || {}),
+                  originY: 'right',
+                  left: img.left - (img.width * img.scale) / 2 - defaultVaule.bottomNumberLeftSpace,
+                  selectable: false,
+                  evented: false
+                });
+                img.number = text;
+              }
               img.hasControls = img.hasBorders = false;
               this.pointEvent(img);
               this.canvas.add(img);
+              img.number && this.canvas.add(img.number);
               this.canvas.requestRenderAll();
             } else {
               const text = new this.fabric.Text(String(v.value), {
@@ -406,6 +420,13 @@ export default {
       });
       // this.canvas.add(...textList);
     },
+    // 标记移动时 setCoords()方法手动更新相关联的序号等坐标
+    updateNumber(point) {
+      if (point.number) {
+        point.number.setCoords();
+        point.number.set({ left: point.left - (point.width * point.scale) / 2 - defaultVaule.bottomNumberLeftSpace, top: point.top });
+      }
+    },
     pointEvent(point) {
       point.on('mouseover', () => {
         this.showDrapPopup(point, true);
@@ -417,6 +438,7 @@ export default {
       if (this.eventStyle.evented) {
         point.on('moving', () => {
           this.moveLimit(point);
+          this.updateNumber(point);
           this.canvas.renderAll();
           this.showDrapPopup(point);
         });
@@ -483,7 +505,8 @@ export default {
       this.isDropVisible = true;
       this.dropPos = {
         left: point.left,
-        top: point.top
+        top: point.top,
+        margin: { top: this.propItems.yCellHeight }
       };
       const x = arguments.length > 1 && point.other?.viewTime ? point.other.viewTime : this.getXValue(point.left);
       this.dropVal = {

package/packages/multi-chat/chat/index.vue

@@ -191,7 +191,7 @@
             <chat-footer :addvisible.sync="visible" :validTalkingEnv="validTalkingEnv" :hideQueueBtns="hideQueueBtns"></chat-footer>
             <Video v-if="showVideo"></Video>
             <Audio v-if="showAudio" :validTalkingEnv="validTalkingEnv"></Audio>
-            <div v-if="showPanel && clientId" :class="['collapse-icon', foldPanel ? '' : 'fold']" @click="() => (foldPanel = !foldPanel)">
+            <div v-if="showPanel && clientId && !rightPanelHide" :class="['collapse-icon', foldPanel ? '' : 'fold']" @click="() => (foldPanel = !foldPanel)">
               <img style="position: absolute;z-index: 30000;top: calc(50% - 6px);right: 10px;" src="../img/left.png" width="9" />
             </div>
           </a-layout>
@@ -416,11 +416,15 @@ export default {
     enableTypeValid: {
       type: Boolean,
       default: false
+    },
+    rightPanelHide: {
+      type: Boolean,
+      default: false
     }
   },
   async created() {
     this.init();
-    this.registerEvent('searchCurrenChatList', ({type = 'change', keyword}) => {
+    this.registerEvent('searchCurrenChatList', ({ type = 'change', keyword }) => {
       this.handleKeywordsChange({ target: { value: keyword } });
       type == 'pressEnter' && this.handleKeywordsSearch({ target: { value: keyword } });
     });
@@ -507,7 +511,8 @@ export default {
         (!this.isConference && !this.clientId) ||
         this.foldPanel ||
         (currentTab == 'queue' && !this.isShowPanel) ||
-        (!this.isShowPanel && !this.isShowGroupChat)
+        (!this.isShowPanel && !this.isShowGroupChat) ||
+        this.rightPanelHide
       ) {
         return 24;
       }
@@ -521,7 +526,8 @@ export default {
         (!this.isConference && !this.clientId) ||
         this.foldPanel ||
         (currentTab == 'queue' && !this.isShowPanel) ||
-        (!this.isShowPanel && !this.isShowGroupChat)
+        (!this.isShowPanel && !this.isShowGroupChat) ||
+        this.rightPanelHide
       ) {
         return 0;
       }
@@ -636,7 +642,7 @@ export default {
       'setLastCurrentTab',
       'setQueueItem',
       'setCurScrollItem',
-      'setSessionType',
+      'setSessionType'
     ]),
     ...mapActions(['setChatTimer', 'getVideoHistoryList', 'initUniRTC']),
     ...mapActions({
@@ -791,7 +797,7 @@ export default {
             this.status = status;
             clearInterval(this.heartTimer);
             // 不是“客服人员”,不用心跳连接
-            if(!isService) return;
+            if (!isService) return;
             this.heartTimer = setInterval(() => {
               fetch.post(
                 '/chat/service/sessionHeart',
@@ -1288,7 +1294,7 @@ export default {
               this.initUniRTC({
                 ...data.obj,
                 params: {
-                  assemblyId: this.assemblyId,
+                  assemblyId: this.assemblyId
                 }
               });
             }