cnhis-design-vue 2.1.125 → 2.1.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "2.1.125",
+  "version": "2.1.126",
   "description": "前端业务UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",
@@ -114,4 +114,4 @@
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   }
-}
+}

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

@@ -14,6 +14,8 @@ import DropPopup from '../components/DropPopup';
 import MouseRightClick from '../components/MouseRightClick';
 import eventCommon from '../mixins/eventCommon';
 import Bus from '../utils/bus';
+import { cloneDeep } from 'lodash';
+import { sortByTime } from '../utils';
 
 const rightClickNode = [
   { name: '修改', type: 'edit' },
@@ -65,6 +67,8 @@ export default {
     }
   },
   data() {
+    this.markData = sortByTime(cloneDeep(this.templateData.bottom?.list));
+    this.markObjs = [];
     return {
       leftStartX: 0,
       isDropVisible: false,
@@ -101,7 +105,7 @@ export default {
       // this.canvas.renderAll();
       if (this.templateData.bottom) {
         this.drawExtracorporealCirculation();
-        this.drawBottomTextDataGroup(this.templateData.bottom);
+        this.drawBottomTextDataGroup();
       }
     },
     drawBorder() {
@@ -459,23 +463,19 @@ export default {
       return time >= minTime && time <= maxTime;
     },
     removeMark() {
-      this.canvas.forEachObject(obj => {
-        if (obj.type && obj.type === 'mark') {
-          this.canvas.remove(obj);
-        }
-      });
+      this.markObjs.forEach(obj => this.canvas.remove(obj));
     },
-    // 底部标记
-    drawBottomTextDataGroup(obj) {
+    drawTopTotalLineAndTitle() {
+      const { bottom: obj, left: leftData } = this.templateData;
       const { endX, originX, endY, topTotal, markHeight } = this.propItems;
-      if (!markHeight || !obj.list) {
+      if (!topTotal.width) {
         return;
       }
 
-      topTotal.width && this.canvas.add(this.drawLine([endX, endY - 1, endX, endY + markHeight], { ...this.defaultRectStyle }));
-      topTotal.width && this.canvas.add(this.drawLine([originX, endY + markHeight, endX, endY + markHeight], { ...this.defaultRectStyle }));
-      // const textList = [];
-      const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
+      const line1 = this.drawLine([endX, endY - 1, endX, endY + markHeight], { ...this.defaultRectStyle });
+      const line2 = this.drawLine([originX, endY + markHeight, endX, endY + markHeight], { ...this.defaultRectStyle });
+
+      const marginLeft = leftData.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
       const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
       const title = new this.fabric.Text(String(obj.title), {
         ...defaultVaule.style,
@@ -487,14 +487,31 @@ export default {
         top: endY + markHeight / 2,
         type: 'mark'
       });
-      this.canvas.add(title);
-      // textList.push(title);
+      this.markObjs.push(title, line1, line2);
+      this.canvas.add(title, line1, line2);
+    },
+    // 底部标记
+    drawBottomTextDataGroup() {
+      const { bottom: obj } = this.templateData;
+      const { originX, endY, markHeight, xCellWidth } = this.propItems;
+      if (!markHeight || !this.markData?.length) {
+        return;
+      }
+      if (this.markObjs.length) {
+        [...this.markObjs].forEach(obj => this.canvas.remove(obj));
+        this.markObjs = [];
+      }
+
+      this.drawTopTotalLineAndTitle();
+
       const _endY = this.extracorporealCirculationHeight ? endY + this.extracorporealCirculationHeight : endY;
       const baseY = _endY + 2; // 目前固定10像素的下边距
       const baseYLimit = endY - 2; // 目前固定10像素的上边距
       const lineHeightText = (obj.style?.fontSize || 12) + 2;
       const lineHeightImg = (obj.iconStyle?.height || 12) + 2;
       const lineHeightSeq = (obj.seqStyle?.circle?.radius || 9) * 2 + 2;
+      let prevLeft = originX;
+      let prevCondition;
 
       const setTop = (lineHeight, i, condition) => {
         if (!~condition.limitIndex) {
@@ -511,12 +528,16 @@ export default {
         }
         return condition.y;
       };
-      obj.list.forEach((item, index) => {
+      this.markData.forEach((item, index) => {
         const condition = {
           limitIndex: -1, // 标志点是否往上排列的标志，大于-1则表示需要往上排列
           y: baseY
         };
         const x = this.computedX(item[0]);
+        // 相隔小于或等于一个小格的宽度就继承上个时间标记的高度继续计算定位，即错位显示
+        if (x - prevLeft <= xCellWidth) {
+          Object.assign(condition, prevCondition);
+        }
         if (this.isLimit(item[0])) {
           const pointList = [];
           item[1].forEach(async (v, i) => {
@@ -550,7 +571,12 @@ export default {
               }
             }
           });
-          Promise.all(pointList).then(res => this.canvas.add(...res));
+          prevLeft = x;
+          prevCondition = condition;
+          Promise.all(pointList).then(res => {
+            this.markObjs.push(...res);
+            this.canvas.add(...res);
+          });
         }
       });
     },
@@ -624,9 +650,31 @@ export default {
             newVal: this.getXValue(point.left)
           };
           this.$emit('markChange', value);
+          this.updateMarkData(value);
+          this.drawBottomTextDataGroup();
+          this.canvas.discardActiveObject();
         });
       }
     },
+    updateMarkData({ data, newVal }) {
+      const id = data.id;
+      let listIndex, index;
+      listIndex = this.markData.findIndex(v => {
+        const i = v[1].findIndex(k => k.data?.id === id);
+        i > -1 && (index = i);
+        return i > -1;
+      });
+      const obj = this.markData[listIndex][1].splice(index, 1)[0];
+      const newIndex = this.markData.findIndex(v => v[0] === newVal);
+      if (!~newIndex) {
+        this.markData.push([newVal, [obj]]);
+      } else {
+        this.markData[newIndex][1].push(obj);
+      }
+      const emptyIndex = this.markData.findIndex(v => v[1].length === 0);
+      !!~emptyIndex && this.markData.splice(emptyIndex, 1);
+      sortByTime(this.markData);
+    },
     moveLimit(point) {
       point.setCoords();
       const { originX, endX, originY, endY, markHeight } = this.propItems;

package/packages/fabric-chart/src/mixins/drawExtracorporealCirculation.js

@@ -155,13 +155,9 @@ export default {
           this.$emit('extracorporealCirculationChange', params);
           const { index, key, data } = params;
           this.extracorporealCirculation.list[index][key] = data;
-          this.drawExtracorporealCirculation(this.extracorporealCirculation);
+          this.drawExtracorporealCirculation();
           this.canvas.discardActiveObject();
-          this.canvas.forEachObject(obj => {
-            if (obj.type && obj.type === 'mark') {
-              obj.bringForward();
-            }
-          });
+          this.markObjs.forEach(obj => obj.bringForward());
         });
       }
     },

package/packages/fabric-chart/src/utils/index.js

@@ -79,3 +79,11 @@ export function getIntersectionPoint(a, b, c, d) {
   // 否则不相交
   return false;
 }
+
+export function sortByTime(list = []) {
+  list.sort((a, b) => {
+    return Date.parse(a[0]) - Date.parse(b[0]);
+  });
+
+  return list;
+}

package/packages/full-calendar/src/FullCalendar.vue

@@ -473,7 +473,7 @@ export default create({
 });
 </script>
 <style lang="less" scoped>
-@primary-color: #2d7aff;
+@main-color: #2563f4;
 
 .c-full-calendar {
   position: relative;
@@ -527,7 +527,7 @@ export default create({
         align-items: center;
         flex: 0 0 66px;
         padding: 0 5px;
-        background: #f7f7f7;
+        background: #fff;
         .header-left {
           color: #212121;
           span {
@@ -543,19 +543,19 @@ export default create({
             border: 1px solid #d9d9d9;
             cursor: pointer;
             &:hover {
-              color: #2d7aff;
+              color: @main-color;
               background: rgba(36, 116, 255, 0.1);
               border-color: rgba(36, 116, 255, 0.2);
               i {
-                color: #2d7aff;
+                color: @main-color;
               }
             }
             &:active {
-              color: #2d7aff;
+              color: @main-color;
               background: rgba(36, 116, 255, 0.2);
-              border-color: #2d7aff;
+              border-color: @main-color;
               i {
-                color: #2d7aff;
+                color: @main-color;
               }
             }
             &.disabled {
@@ -580,7 +580,7 @@ export default create({
               box-shadow: 1px 0 0 0 rgba(36, 116, 255, 0.2);
             }
             &:active {
-              box-shadow: 1px 0 0 0 #2d7aff;
+              box-shadow: 1px 0 0 0 @main-color;
             }
           }
           .btn-next {
@@ -629,6 +629,10 @@ export default create({
         overflow-y: auto;
         box-sizing: border-box;
 
+        .fc-timegrid-divider {
+          display: none;
+        }
+
         .fc-header-toolbar {
           margin-bottom: 0;
         }
@@ -641,6 +645,7 @@ export default create({
 
         .fc-col-header-cell-cushion {
           font-weight: normal;
+          color: @main-color;
           & > span {
             padding: 10px 0;
             display: inline-block;
@@ -716,9 +721,9 @@ export default create({
           }
         }
         .fc-day-today .week-header {
-          color: @primary-color;
+          color: @main-color;
           .week-day {
-            color: @primary-color;
+            color: @main-color;
           }
         }
 
@@ -755,7 +760,7 @@ export default create({
             background-color: #f2f7ff;
             .fc-daygrid-day-number {
               color: #fff;
-              background-color: #2d7aff;
+              background-color: @main-color;
               border-radius: 50%;
             }
           }

package/packages/full-calendar/src/components/ListTag.vue

@@ -113,6 +113,8 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@main-color: #2563f4;
+
 .list-tag {
   width: 100%;
   height: 100%;
@@ -136,19 +138,19 @@ export default {
         }
         &.active {
           .list-day {
-            color: @primary-color;
+            color: @main-color;
             background: rgba(36, 116, 255, 0.1);
           }
         }
         &.curday {
           .list-day {
             color: #fff;
-            background: @primary-color;
+            background: @main-color;
             &:hover {
-              background: @primary-color;
+              background: @main-color;
             }
           }
-          color: @primary-color;
+          color: @main-color;
         }
         .list-day {
           width: 36px;

package/packages/grid/src/grid.js

@@ -8,6 +8,7 @@ import 'xe-utils';
 import VXETable from 'vxe-table';
 import VXETablePluginAntd from 'vxe-table-plugin-antd';
 import Grid from 'vxe-table/lib/grid';
+import 'vxe-table/lib/style.css';
 import 'vxe-table-plugin-antd/dist/style.css';
 
 VXETable.use(VXETablePluginAntd);