cnhis-design-vue 0.1.40 → 0.1.42

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

@@ -11,31 +11,40 @@ import draw from '../mixins/draw';
 import defaultVaule from '../const/defaultVaule';
 import DropPopup from '../components/DropPopup';
 import MouseRightClick from '../components/MouseRightClick';
-import polylineCommon from '../mixins/polylineCommon';
+import eventCommon from '../mixins/eventCommon';
 
 const rightClickNode = [
   { name: '修改', type: 'edit' },
   { name: '删除', type: 'delete' }
 ];
+
+let topTotalList = [];
+const getTopTotalList = (tree, topTotalList) => {
+  tree.forEach(item => {
+    if (item?.children?.length) {
+      getTopTotalList(item.children, topTotalList);
+    } else {
+      const obj = JSON.parse(JSON.stringify(item));
+      topTotalList.push(obj?.total || '');
+    }
+  });
+};
+
 export default {
   name: 'fabric-text-group',
   components: {
     DropPopup,
     MouseRightClick
   },
-  mixins: [fabricCommon, draw, polylineCommon],
+  mixins: [fabricCommon, draw, eventCommon],
   props: {
     templateData: {
       type: Object,
       required: true
     },
-    other: {
-      type: Object,
-      default: () => {}
-    }
   },
   watch: {
-    other: {
+    'templateData.other': {
       handler(value) {
         if (value) {
           this.removeOther();
@@ -55,7 +64,7 @@ export default {
       isRightVisible: false,
       rightPos: { clientX: 0, clientY: 0 },
       rightClickNode: [],
-      activeEvent: null, // 当前可右键活动的对象
+      activeEvent: null // 当前可右键活动的对象
     };
   },
   mounted() {
@@ -66,26 +75,41 @@ export default {
   computed: {
     girdLineStyle() {
       return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
+    },
+    eventStyle() {
+      return this.propItems.eventStyle;
     }
   },
   methods: {
     init() {
+      if (this.propItems.treeList?.length) {
+        this.topTreeTextGroup(this.propItems.treeList);
+        if (this.propItems.topTotal?.width) {
+          topTotalList = [];
+          getTopTotalList(this.templateData.top.list, topTotalList);
+          this.drawTopTotal(topTotalList);
+        }
+      }
+      this.templateData.left && this.drawLeftScaleGroup(this.templateData.left);
+      this.templateData.other && this.drawTextDataGroup(this.templateData.other);
+      this.templateData.bottom && this.drawBottomTextDataGroup(this.templateData.bottom);
+      this.eventStyle.evented && this.createEvent();
+
+      this.drawBorder();
+      this.canvas.renderAll();
+    },
+    drawBorder() {
+      const { endX, canvasWidth, canvasHeight, topTotal } = this.propItems;
+      const curEndX = topTotal.width ? canvasWidth : endX;
       // 右 下两条线宽度和高度顶格不显示未发现具体原因 暂时减一处理
       // 上边线
-      this.canvas.add(this.drawLine([0, 0, this.propItems.endX, 0], { ...this.girdLineStyle }));
+      this.canvas.add(this.drawLine([0, 0, curEndX, 0], { ...this.girdLineStyle }));
       // 右边线
-      this.canvas.add(this.drawLine([this.propItems.endX, 0, this.propItems.endX, this.propItems.canvasHeight], { ...this.girdLineStyle }));
+      this.canvas.add(this.drawLine([topTotal.width ? curEndX - 1 : curEndX, 0, topTotal.width ? curEndX - 1 : curEndX, canvasHeight], { ...this.girdLineStyle }));
       // 下边线
-      this.canvas.add(this.drawLine([0, this.propItems.canvasHeight - 1, this.propItems.endX, this.propItems.canvasHeight - 1], { ...this.girdLineStyle }));
+      this.canvas.add(this.drawLine([0, canvasHeight - 1, curEndX, canvasHeight - 1], { ...this.girdLineStyle }));
       // 左侧边框线
-      this.canvas.add(this.drawLine([0, 0, 0, this.propItems.canvasHeight], { ...this.girdLineStyle }));
-
-      this.propItems.treeList.length > 0 && this.topTreeTextGroup(this.propItems.treeList);
-      this.templateData.left && this.drawLeftScaleGroup(this.templateData.left);
-      this.templateData.other && this.drawTextDataGroup(this.templateData.other);
-      this.templateData.bottom && this.drawBottomTextDataGroup(this.templateData.bottom);
-      this.createEvent();
-      this.canvas.renderAll();
+      this.canvas.add(this.drawLine([0, 0, 0, canvasHeight], { ...this.girdLineStyle }));
     },
     createEvent() {
       this.canvas.on('mouse:up', event => {
@@ -101,9 +125,6 @@ export default {
     },
     // 打开右键菜单
     openRightModal(event) {
-      if (!this.propItems.eventStyle.evented) {
-        return;
-      }
       this.rightPos = {
         clientX: event.e.clientX || event.e.pageX,
         clientY: event.e.clientY || event.e.pageY
@@ -128,7 +149,7 @@ export default {
         type: text.type,
         index: text.index,
         dataIndex: text.dataIndex
-      }
+      };
       this.$emit(`${type}Other`, obj);
     },
     removeOther() {
@@ -138,11 +159,40 @@ export default {
         }
       });
     },
+    drawTopTotal(topTotalList) {
+      const { endX, canvasWidth, yCellHeightTop, topTotal, endYTop, spaceHeight } = this.propItems;
+      const textList = [];
+      const left = endX + (canvasWidth - endX) / 2;
+      topTotalList.forEach((v, i) => {
+        const top = i * yCellHeightTop + yCellHeightTop / 2;
+        const text = v
+          ? new this.fabric.Text(String(v), {
+              ...defaultVaule.style,
+              ...(topTotal.style || defaultVaule.textStyle),
+              left,
+              top,
+              originX: 'center',
+              originY: 'center'
+            })
+          : null;
+        text && textList.push(text);
+      });
+      const title = this.drawTextGroup(
+        { width: canvasWidth - endX, height: spaceHeight, strokeWidth: 1 },
+        { text: String(topTotal.title), ...(topTotal.style || defaultVaule.textStyle) },
+        { left: endX, top: endYTop }
+      );
+      this.canvas.add(...textList, title);
+    },
     topTreeTextGroup(list) {
       list.forEach(item => {
-        if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+        if (item?.children?.length) {
           this.canvas.add(
-            this.drawTextGroup({ width: item.width, height: item.height, strokeWidth: 1 }, { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {})}, { left: item.left, top: item.top })
+            this.drawTextGroup(
+              { width: item.width, height: item.height, strokeWidth: 1 },
+              { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {}) },
+              { left: item.left, top: item.top }
+            )
           );
           this.topTreeTextGroup(item.children);
         } else {
@@ -168,7 +218,7 @@ export default {
       }
     },
     drawTextDataGroupColList(colList) {
-      const { originY, eventStyle } = this.propItems;
+      const { originY } = this.propItems;
       let textList = [];
       colList.forEach((item, index) => {
         const baseTop = originY + (item.marginTop || 10);
@@ -189,7 +239,7 @@ export default {
               index: i,
               type: 'colList',
               id: `${index}_${i}_other_${Date.now()}`,
-              ...eventStyle
+              ...this.eventStyle
             });
             text.hasControls = text.hasBorders = false;
             textList.push(text);
@@ -200,12 +250,12 @@ export default {
     },
     drawTextDataGroupList(list) {
       let textList = [];
-      const { originX, originY, eventStyle } = this.propItems;
+      const { originX, originY } = this.propItems;
       let top = originY + 10;
       list.forEach((item, index) => {
-        const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || 3;
-        const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
-        
+        const marginLeft = item.titleStyle?.marginLeft || 8;
+        const left = originX - marginLeft; // 防止最左边的数据与名称显示重合了
+
         if (list[index - 1]) {
           top += item.lineHeight || 15;
         }
@@ -214,11 +264,12 @@ export default {
           ...defaultVaule.style,
           ...defaultVaule.textStyle,
           ...item.style,
+          ...(item.titleStyle || {}),
           originX: 'right',
           originY: 'center',
           left,
           top,
-          id: `${index}_other_${Date.now()}`,
+          id: `${index}_other_${Date.now()}`
         });
         textList.push(title);
         item.dataList.forEach((v, i) => {
@@ -237,7 +288,7 @@ export default {
               index: i,
               type: 'list',
               id: `${index}_${i}_other_${Date.now()}`,
-              ...eventStyle
+              ...this.eventStyle
             });
             text.hasControls = text.hasBorders = false;
             textList.push(text);
@@ -266,9 +317,10 @@ export default {
       if (!obj.list) {
         return;
       }
-      const { originX, endY, canvasHeight, eventStyle } = this.propItems;
+      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 || 3;
+      const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
       const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
       const title = new this.fabric.Text(String(obj.title), {
         ...defaultVaule.style,
@@ -280,6 +332,7 @@ export default {
         top: endY + (canvasHeight - endY) / 2,
         type: 'mark'
       });
+
       textList.push(title);
       const baseY = endY + 2; // 目前固定10像素的下边距
       const baseYLimit = endY - 2; // 目前固定10像素的上边距
@@ -311,11 +364,16 @@ export default {
               other: v.other || {},
               time: item[0],
               name: v.name,
-              type: 'mark',
+              type: 'mark'
             };
+            const eventStyle = !this.eventStyle.evented
+              ? {
+                  lockMovementX: true,
+                  lockMovementY: true
+                }
+              : {};
             if (this.isObject(v) && !v.value) {
               const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
-                ...defaultVaule.style,
                 ...common,
                 ...eventStyle
               });
@@ -355,20 +413,22 @@ export default {
         this.isDropVisible = false;
       });
       // 移动中 实时更新相关联的线的坐标
-      point.on('moving', () => {
-        this.moveLimit(point);
-        this.canvas.renderAll();
-        this.showDrapPopup(point);
-      });
-      point.on('moved', () => {
-        this.isDropVisible = false;
-        const value = {
-          data: point.data,
-          oldVal: point.time,
-          newVal: this.getXValue(point.left),
-        };
-        this.$emit('markChange', value);
-      });
+      if (this.eventStyle.evented) {
+        point.on('moving', () => {
+          this.moveLimit(point);
+          this.canvas.renderAll();
+          this.showDrapPopup(point);
+        });
+        point.on('moved', () => {
+          this.isDropVisible = false;
+          const value = {
+            data: point.data,
+            oldVal: point.time,
+            newVal: this.getXValue(point.left)
+          };
+          this.$emit('markChange', value);
+        });
+      }
     },
     moveLimit(point) {
       point.setCoords();

package/packages/fabric-chart/src/fabric-chart2/FabricCenter.vue

@@ -8,7 +8,7 @@
 <script>
 import fabricCommon from '../mixins/fabricCommon';
 import draw from '../mixins/draw';
-import polylineCommon from '../mixins/polylineCommon';
+import eventCommon from '../mixins/eventCommon';
 import MouseRightClick from '../components/MouseRightClick';
 import DropPopup from '../components/DropPopup';
 import defaultVaule from '../const/defaultVaule';
@@ -19,7 +19,7 @@ const rightClickNode = [
 ];
 export default {
   name: 'fabric-center2',
-  mixins: [fabricCommon, draw, polylineCommon],
+  mixins: [fabricCommon, draw, eventCommon],
   props: {
     other: {
       type: Object,
@@ -65,17 +65,19 @@ export default {
   },
   created() {},
   mounted() {
-    document.addEventListener('click', this.addEventListenerClick, true);
-    document.addEventListener('scroll', this.addEventListenerScroll, true);
     this.$nextTick(() => {
       this.init();
     });
   },
-  computed: {},
+  computed: {
+    eventStyle() {
+      return this.propItems.eventStyle;
+    }
+  },
   methods: {
     init() {
       this.drawOther(this.other);
-      this.createEvent();
+      this.eventStyle.evented && this.createEvent();
       this.polylineList = JSON.parse(JSON.stringify(this.polyline));
     },
     getContainer() {
@@ -606,11 +608,5 @@ export default {
       this.polylineList = JSON.parse(JSON.stringify(this.polyline));
     }
   },
-  beforeDestroy() {
-    const upperCanvas = document.querySelector('.upper-canvas');
-    upperCanvas && upperCanvas.removeEventListener('contextmenu', this.addEventListenerContextmenu, true);
-    document.removeEventListener('click', this.addEventListenerClick, true);
-    document.removeEventListener('scroll', this.addEventListenerScroll, true);
-  }
 };
 </script>

package/packages/fabric-chart/src/mixins/{polylineCommon.js → eventCommon.js}

@@ -1,13 +1,15 @@
 
 export default {
-  name: 'polylineCommon',
+  name: 'eventCommon',
   data() {
     return {
     };
   },
   mounted() {
-    document.addEventListener('click', this.addEventListenerClick, true);
-    document.addEventListener('scroll', this.addEventListenerScroll, true);
+    if (this.eventStyle.evented) {
+      document.addEventListener('click', this.addEventListenerClick, true);
+      document.addEventListener('scroll', this.addEventListenerScroll, true);
+    }
   },
   methods: {
     // 折线点移动限制 目前仅限制不能移动出画布
@@ -60,5 +62,13 @@ export default {
     addEventListenerScroll() {
       this.isRightVisible = false;
     }
+  },
+  beforeDestroy() {
+    if (this.eventStyle.evented) {
+      const upperCanvas = document.querySelector('.upper-canvas');
+      upperCanvas && upperCanvas.removeEventListener('contextmenu', this.addEventListenerContextmenu, true);
+      document.removeEventListener('click', this.addEventListenerClick, true);
+      document.removeEventListener('scroll', this.addEventListenerScroll, true);
+    }
   }
 };

package/packages/index.js

@@ -176,15 +176,14 @@ const install = function(Vue) {
   components.map(component => {
     Vue.use(component);
   });
-
   Vue.prototype.$message = message;
   Vue.prototype.$notification = notification;
-  Vue.prototype.$info = Modal.info;
-  Vue.prototype.$success = Modal.success;
-  Vue.prototype.$error = Modal.error;
-  Vue.prototype.$warning = Modal.warning;
-  Vue.prototype.$confirm = Modal.confirm;
-  Vue.prototype.$destroyAll = Modal.destroyAll;
+  Vue.prototype.$info = Modal.extends.info;
+  Vue.prototype.$success = Modal.extends.success;
+  Vue.prototype.$error = Modal.extends.error;
+  Vue.prototype.$warning = Modal.extends.warning;
+  Vue.prototype.$confirm = Modal.extends.confirm;
+  Vue.prototype.$destroyAll = Modal.extends.destroyAll;
 };
 
 // 判断是否是直接引入文件

package/packages/modal/index.js

@@ -1,6 +1,10 @@
-import { Modal } from 'ant-design-vue';
+// 导入组件
+import Modal from './src/Modal.js';
 
-Modal.name = 'CModal';
+// 为组件提供 install 安装方法，供按需引入
+Modal.install = function(Vue) {
+  Vue.component(Modal.name, Modal);
+};
 
 // 默认导出组件
 export default Modal;

package/packages/modal/src/Modal.js

@@ -0,0 +1,7 @@
+import { Modal } from 'ant-design-vue';
+
+import create from '@/core/create';
+export default create({
+  name: 'modal',
+  extends: Modal
+});