cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/fabric-chart/src/components/MouseRightClick.vue

@@ -1,168 +0,0 @@
-<template>
-  <div class="c-mouse-right-menu-popup c-animation-in" :style="dialogStyle">
-    <div class="c-mouse-right-menu">
-      <div v-for="(item, index) in nodeList" :key="index" class="c-mouse-menu-item" @click="handleNodeClick(item)">
-        <span>{{ item.name }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CMouseRightClick',
-  props: {
-    nodeList: {
-      type: Array,
-      require: true
-    },
-    rightPos: {
-      type: Object,
-      required: true
-    },
-    getContainer: Function
-  },
-
-  computed: {
-    dialogStyle() {
-      const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
-      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-      const style = {
-        top: '',
-        bottom: '',
-        left: '',
-        right: '',
-        'transform-origin': ''
-      };
-      const height = 200;
-      if (screenWidth - this.rightPos.clientX < height) {
-        style.right = screenWidth - this.rightPos.clientX + 'px';
-        style['transform-origin'] = 'right';
-      } else {
-        style.left = this.rightPos.clientX + 'px';
-        style['transform-origin'] = 'left';
-      }
-      if (screenHeight - this.rightPos.clientY < height) {
-        style.bottom = screenHeight - this.rightPos.clientY + 'px';
-        style['transform-origin'] += ' bottom';
-      } else {
-        style.top = this.rightPos.clientY + 'px';
-        style['transform-origin'] += ' top';
-      }
-      return style;
-    }
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      const body = this.getContainer() ? this.getContainer(): document.querySelector('body');
-      if (body.append) {
-        body.append(this.$el);
-      } else {
-        body.appendChild(this.$el);
-      }
-    });
-  },
-  methods: {
-    handleNodeClick(item) {
-      this.$emit('nodeClick', item);
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.c-mouse-right-menu-popup {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  z-index: 1001;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
-  border: 1px solid #e2e6ed;
-  border-radius: 2px;
-  font-size: 12px;
-}
-.c-mouse-right-menu {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  svg {
-    position: absolute;
-    left: 5px;
-    top: 8px;
-    fill: #3d4757;
-    stroke: #3d4757;
-  }
-}
-.c-mouse-menu-item {
-  flex-shrink: 0;
-  flex-grow: 1;
-  position: relative;
-  padding: 0 32px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  text-align: left;
-  position: relative;
-  cursor: pointer;
-  svg {
-    position: absolute;
-    left: 5px;
-    top: 8px;
-    fill: #3d4757;
-    stroke: #3d4757;
-  }
-}
-.c-mouse-menu-item:hover {
-  background: #ecf5ff;
-  color: #2d7aff;
-  svg {
-    fill: #2d7aff;
-    stroke: #2d7aff;
-  }
-}
-.c-mouse-right-menu-line {
-  width: 100%;
-  height: 1px;
-  padding: 0;
-  background-color: #e2e6ed;
-}
-
-.c-animation-in {
-  animation: fadeScaleYIn 0.2s ease-in-out;
-}
-.c-animation-out {
-  animation: fadeScaleYOut 0.2s ease-in-out;
-}
-@keyframes fadeScaleYIn {
-  0% {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes fadeScaleYOut {
-  0% {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-}
-</style>

package/packages/fabric-chart/src/const/defaultVaule.js

@@ -1,58 +0,0 @@
-const data = {
-  style: {
-    evented: false,
-    selectable: false
-  },
-  rectStyle: {
-    fill: 'transparent',
-    stroke: '#999',
-    strokeWidth: 1
-  },
-  textStyle: {
-    fontFamily: '微软雅黑',
-    fontSize: 12,
-    fill: '#000',
-    lineHeight: 1
-  },
-  borderStyle: {
-    stroke: '#999',
-    strokeWidth: 1,
-    selectable: false,
-    evented: false
-  },
-  // 折线图中的点
-  pointStyle: {
-    fill: '#ffffff', // 填充色
-    stroke: '#000000', // 描边色
-    originX: 'center',
-    originY: 'center'
-  },
-  // 折线图中的线
-  lineStyle: {
-    stroke: '#000', // 描边色
-    strokeWidth: 1, // 描边宽度
-    originX: 'center',
-    originY: 'center'
-  },
-  topSpaceHeight: 10, // templateData.top.spaceHeight
-  topSpaceGridNumber: 3, // templateData.top.xScalevalue.spaceGridNumber
-  leftSpaceGridNumber: 2, // templateData.left.leftYScalevalue.spaceGridNumber
-  rightSpaceGridNumber: 2, // templateData.right.rightYScalevalue.spaceGridNumber
-  topTotal: {
-    title: '总量',
-    width: 0,
-    style: {
-      fontFamily: '微软雅黑',
-      fontSize: 12,
-      fill: '#000',
-      lineHeight: 1
-    }
-  },
-  criticalStyle: { // 危急值样式
-    stroke: 'purple', // 颜色 默认 #999
-    strokeWidth: 1, // 线宽 默认 1
-    strokeDashArray: [0, 0] // 实线设置 默认[0, 0]
-  },
-};
-
-export default data;

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

@@ -1,296 +0,0 @@
-<template>
-  <div>
-    <canvas :id="id"></canvas>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { fabric } from 'fabric';
-import defaultVaule from '../const/defaultVaule';
-
-export default {
-  name: 'FabricCanvas',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      canvas: null,
-      type: 'canvas',
-      canvasAttr: {
-        selectable: false,
-        evented: false,
-        selection: false,
-        containerClass: 'c-fabric-canvas-container',
-        fireRightClick: true
-      },
-      fabric: fabric,
-      gridYnumberTop: 0,
-      levelRow: 0, //  左上角树形表格竖形层级
-      treeList: []
-    };
-  },
-  provide() {
-    return {
-      $canvas: () => this.canvas,
-      $group: () => null,
-      $fabric: () => fabric,
-      $propItems: () => {
-        return {
-          type: this.templateData.type,
-          endX: this.endX,
-          endY: this.endY,
-          originX: this.originX,
-          originY: this.originY,
-          treeTableminCellWidth: this.treeTableminCellWidth,
-          gridYNumber: this.gridYNumber,
-          gridXNumber: this.gridXNumber,
-          canvasWidth: this.canvasWidth,
-          canvasHeight: this.canvasHeight,
-          xCellWidth: this.xCellWidth,
-          yCellHeight: this.yCellHeight,
-          table: { ...this.templateData.table },
-          spaceHeight: this.spaceHeight,
-          gridYnumberTop: this.gridYnumberTop,
-          yCellHeightTop: this.yCellHeightTop,
-          endYTop: this.endYTop,
-          treeList: this.treeList,
-          xScaleList: this.xScaleList,
-          xScaleCellList: this.xScaleCellList,
-          yScaleCellLeft: this.yScaleCellLeft,
-          yScaleCellRight: this.yScaleCellRight,
-          eventStyle: this.eventStyle,
-          topTotal: this.topTotal,
-          operable: this.operable
-        };
-      }
-    };
-  },
-  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() {
-      // 画布宽度
-      return this.templateData.canvasWidth;
-    },
-    canvasHeight() {
-      // 画布高度
-      return this.templateData.canvasHeight;
-    },
-    treeTableminCellWidth() {
-      return this.templateData.top?.treeTableminCellWidth || this.templateData.left?.titleWidth || 20;
-    },
-    topTotal() {
-      return this.templateData.top?.total ? { ...defaultVaule.topTotal, ...this.templateData.top.total } : defaultVaule.topTotal;
-    },
-    gridXNumber() {
-      // 网格水平方向总数    如果设置了默认值就直接取用
-      if (this.templateData.table.mainXCell && this.templateData.table.subXCell) {
-        return this.templateData.table.mainXCell * this.templateData.table.subXCell;
-      }
-      // 如果没设置 就从顶部列表内自己计算一下 list遍历后将每一项完全展开后的数组长度存入topListLength取出最大值即可
-      const spaceGridNumber = this.templateData.top?.xScalevalue?.spaceGridNumber || defaultVaule.topSpaceGridNumber;
-      return (this.templateData.top?.xScalevalue?.list?.length || 1) * spaceGridNumber;
-    },
-    gridYNumber() {
-      // 网格垂直方向总数
-      return this.templateData.table.mainYCell * this.templateData.table.subYCell;
-    },
-    originX() {
-      // 网格左侧起始坐标 X, 也是整个区域左侧列表坐标最大坐标值 取出初始化后网格区域水平方向多出的余数 添加到左栏宽度上
-      const originX = this.templateData.top?.treeTableWidth || this.templateData.left?.width || 200;
-      const residue = (this.endX - originX) % this.gridXNumber;
-      return originX + residue;
-    },
-    originY() {
-      // 顶部列表高度 网格不需要的高度放到顶部，因为底部不一定存在列表
-      const topHeight = this.endYTop;
-      const residue = (this.endY - topHeight) % this.gridYNumber;
-      return topHeight + residue + (this.templateData.top?.spaceHeight || defaultVaule.topSpaceHeight);
-    },
-    endX() {
-      // 网格区域水平方向最大坐标值, 也是整个画布右侧列表坐标起始值，网格右下角x轴坐标值
-      if (!this.templateData.right && !this.topTotal) return this.templateData.canvasWidth;
-      return this.templateData.canvasWidth - (this.templateData.right?.width || 20) - this.topTotal.width;
-    },
-    endY() {
-      // 画布高度 - 底部列表高度 ，网格右下角y轴坐标值
-      if (!this.templateData.bottom) return this.templateData.canvasHeight;
-      const endHeight = this.templateData.bottom.height || 30;
-      return this.canvasHeight - endHeight;
-    },
-    xCellWidth() {
-      // 水平方向网格宽度
-      return (this.endX - this.originX) / this.gridXNumber;
-    },
-    yCellHeight() {
-      // 垂直方向网格宽度
-      return (this.endY - this.originY) / this.gridYNumber;
-    },
-    spaceHeight() {
-      // 头部表格底部空白位置的高，用于显示x轴时间点
-      const topHeight = this.endYTop;
-      const residue = (this.endY - topHeight) % this.gridYNumber;
-      return residue + (this.templateData.top?.spaceHeight || defaultVaule.topSpaceHeight);
-    },
-    yCellHeightTop() {
-      // 头部表格垂直方向网格高度
-      return this.templateData.top?.treeTableminCellHeight || 20;
-    },
-    endYTop() {
-      return this.gridYnumberTop * this.yCellHeightTop;
-    },
-    // 转换为时间戳的x轴时间列表
-    xScaleList() {
-      const list = this.templateData.top?.xScalevalue?.list || [];
-      return list.map(item => {
-        return new Date(item).getTime();
-      });
-    },
-    // x轴每个网格每1px的毫秒值和每个网格刻度对应的时间戳和每个网格对应的像素px值，返回一个list数组
-    xScaleCellList() {
-      const { subSecondXCell } = this.templateData.table;
-      const list = [];
-      this.xScaleList.forEach((v, j) => {
-        if (this.xScaleList[j + 1]) {
-          const cellTime = (this.xScaleList[j + 1] - v) / subSecondXCell;
-          const scaleCellTime = cellTime / this.xCellWidth;
-          const left = this.originX + this.xCellWidth * subSecondXCell * j;
-          for (let i = 0; i < subSecondXCell; i++) {
-            list.push({
-              x: left + i * this.xCellWidth, // 网格刻度对应的坐标值，单位px
-              time: v + i * cellTime, // 网格刻度对应的时间戳
-              xScaleTime: scaleCellTime // 每个网格每1px的毫秒值
-            });
-          }
-        }
-      });
-      return list;
-    },
-    // y轴每mmHg的脉搏/血压的高度值
-    yScaleCellLeft() {
-      const list = this.templateData.left?.leftYScalevalue?.list || [];
-      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.left?.leftYScalevalue?.spaceGridNumber || defaultVaule.leftSpaceGridNumber)) : 10;
-    },
-    // y轴每摄氏度的高度值
-    yScaleCellRight() {
-      const list = this.templateData.right?.rightYScalevalue?.list || [];
-      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.right?.rightYScalevalue?.spaceGridNumber || defaultVaule.rightSpaceGridNumber)) : 10;
-    },
-    eventStyle() {
-      return this.templateData.table?.eventStyle || { selectable: true, evented: true };
-    },
-    operable() {
-      return this.templateData.table?.operable || { set: false, connect: false };
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.canvas = new this.fabric.Canvas('c-fabric-canvas', {
-        width: this.templateData.canvasWidth,
-        height: this.templateData.canvasHeight,
-        //   margin: [this.templateData.margin.top, this.templateData.margin.right, this.templateData.margin.bottom, this.templateData.margin.left],
-        ...this.canvasAttr
-      });
-
-      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?.length) {
-          this.getGridYnumberTop(list[i].children);
-        } else {
-          this.gridYnumberTop++;
-        }
-      }
-    },
-    /**
-     * @description: 计算出每个单元格的横竖级别（即左上角的坐标）和width、height值
-     * @param {树形数据} list
-     * @param {深度值，即当前对象的列的级别} levelCol
-     * @return {*}
-     */
-
-    setTreeStyle(list, levelCol = 0) {
-      const arr = [];
-      const { treeTableminCellWidth, treeTableminCellHeight } = this.templateData.top;
-      for (let i = 0; i < list.length; i++) {
-        const node = list[i];
-        const obj = {};
-        Object.assign(obj, {
-          title: node.title || '',
-          left: levelCol * treeTableminCellWidth,
-          top: this.levelRow * treeTableminCellHeight
-        });
-        this.levelRow++;
-        if (node?.children?.length) {
-          this.levelRow--;
-          obj.title = obj.title.split('').join('\n'); // 如果有子级则文字竖形排列
-          obj.width = treeTableminCellWidth;
-          obj.children = this.setTreeStyle(node.children, levelCol + 1);
-          obj.subSize = this.getChildrenSize(node.children);
-          obj.height = obj.subSize * treeTableminCellHeight;
-        } else {
-          obj.width = this.originX - obj.left;
-          obj.height = treeTableminCellHeight;
-          obj.lineList = JSON.parse(JSON.stringify(node.lineList));
-        }
-        arr.push(obj);
-      }
-      return arr;
-    },
-    getChildrenSize(list) {
-      let subSize = 0;
-      for (let i = 0; i < list.length; i++) {
-        if (list[i]?.children?.length) {
-          subSize += this.getChildrenSize(list[i].children);
-        } else {
-          subSize += 1;
-        }
-      }
-      return subSize;
-    },
-    toDataURL(option) {
-      return this.canvas.toDataURL(option);
-    },
-    renderCanvas() {
-      this.canvas.clear();
-      // this.canvas.renderCanvas();
-    }
-  },
-  beforeDestroy() {
-    this.canvas.dispose();
-  }
-};
-</script>
-
-<style></style>