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

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

@@ -1,104 +0,0 @@
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import defaultVaule from '../const/defaultVaule';
-
-export default {
-  name: 'fabric-left2',
-  mixins: [fabricCommon],
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    defaultTextStyle() {
-      return {
-        ...defaultVaule.style,
-        ...defaultVaule.textStyle,
-        centeredRotation: true,
-        originX: 'center',
-        originY: 'center'
-      };
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  methods: {
-    init() {
-      this.leftScaleValue(this.templateData.left);
-      this.canvas.renderAll();
-    },
-    leftScaleValue(left) {
-      let groupList = [];
-      const { originX, originY, endY, yCellHeight } = this.propItems;
-      const column = left.leftYScalevalue.length;
-      const colWidth = originX / column;
-      const residue = originX % column;
-      const firstColWidth = colWidth + residue;
-      left.leftYScalevalue.forEach((item, index) => {
-        let list = [];
-        // 刻度外框
-        const rectWidth = index === 0 ? firstColWidth : colWidth;
-        const rectLeft = index === 0 ? 0 : firstColWidth + (index - 1) * colWidth;
-        const line =
-          index > 0
-            ? new this.fabric.Line([rectLeft, originY, rectLeft, endY], {
-                ...defaultVaule.style,
-                ...defaultVaule.borderStyle
-              })
-            : null;
-        line && list.push(line);
-
-        const leftVal = rectLeft + rectWidth / 2;
-
-        // 刻度列表
-        item.list.forEach((v, i) => {
-          const top = endY - i * yCellHeight * left.spaceGridNumber;
-          const text = this.createText(v, leftVal, i === 0 ? top - 5 : top, 'center', item.style);
-          list.push(text);
-        });
-
-        // 添加标题和单位
-        let title = item.name || '';
-        if (item.unit) title += '\n' + item.unit;
-        title && list.push(this.createText(title, leftVal, originY + (yCellHeight * left.spaceGridNumber) / 2, 'center', { ...item.style, textAlign: 'center' }));
-        const group = new this.fabric.Group(list, defaultVaule.style);
-        groupList.push(group);
-      });
-      // 外框
-      groupList.push(
-        new this.fabric.Rect({
-          ...defaultVaule.style,
-          ...defaultVaule.rectStyle,
-          width: originX,
-          height: endY - originY,
-          left: 0,
-          top: originY
-        })
-      );
-      const group = groupList.length > 0 ? new this.fabric.Group([...groupList], { ...defaultVaule.style }) : null;
-      group && group.sendToBack(); // 向下跳底层
-      group && this.canvas.add(group);
-    },
-    createText(text, left, top, originX, style) {
-      return new this.fabric.Text(String(text), {
-        ...this.defaultTextStyle,
-        left,
-        top,
-        originX,
-        ...style
-      });
-    }
-  },
-  render(h) {
-    return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  }
-};
-</script>

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

@@ -1,112 +0,0 @@
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import defaultVaule from '../const/defaultVaule';
-
-export default {
-  name: 'fabric-right2',
-  mixins: [fabricCommon],
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    defaultTextStyle() {
-      return {
-        ...defaultVaule.style,
-        ...defaultVaule.textStyle,
-        centeredRotation: true,
-        originX: 'center',
-        originY: 'center'
-      };
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  methods: {
-    init() {
-      this.rightScaleValue(this.templateData.right || null);
-      this.canvas.renderAll();
-    },
-    rightScaleValue(right) {
-      const { endX, endY, centigradeYCell, canvasWidth, canvasHeight } = this.propItems;
-      if (!right) {
-        this.canvas.add(new this.fabric.Line([canvasWidth - 1, 0, canvasWidth - 1, canvasHeight], defaultVaule.borderStyle));
-        return false;
-      }
-      let list = [];
-      // 华氏度外框
-      list.push(
-        new this.fabric.Rect({
-          ...defaultVaule.style,
-          ...defaultVaule.rectStyle,
-          width: canvasWidth - endX - 1,
-          height: canvasHeight - 1,
-          left: endX,
-          top: 0
-        })
-      );
-
-      // 华氏度列表，目前是整数列表（33℃对应91℉，所以存在误差），如果是正对应的如33℃对应91.4℉则不需要计算difVal和spaceHVaule和spaceHVaule0
-      const difVal = 6;
-      const spaceScaleNumber = right.rightYScalevalue.spaceScaleNumber || 5;
-      const mainScaleWidth = 9;
-      const subScaleWidth = 5;
-      const cList = this.templateData.left.leftYScalevalue.find(v => v.type === 'centigrade').list; // 左侧摄氏度温度list
-      const minC = Math.min(...cList); // 左侧温度刻度最小值
-      const h1 = right.rightYScalevalue.list[1];
-      const h0 = right.rightYScalevalue.list[0];
-      const c1 = (5 * (h1 - 32)) / 9;
-      const c0 = (5 * (h0 - 32)) / 9;
-      const top1 = endY - (c1 - minC) * centigradeYCell - difVal;
-      const top0 = endY - (c0 - minC) * centigradeYCell - difVal;
-      const spaceHVaule = (top0 - top1) / spaceScaleNumber; // 每华氏度之间的间隔高度值
-      let endTop; // 记录最上一个刻度数的高度值，用于计算单位的高度
-      right.rightYScalevalue.list.forEach((v, i) => {
-        const c = (5 * (v - 32)) / 9; // 华氏转换为摄氏，此为固定公式
-        const top = endY - (c - minC) * centigradeYCell - difVal; // 存在6px的误差，因为比如34℃=93.2华氏度而不是93华氏度
-        if (i === right.rightYScalevalue.list.length - 1) endTop = top;
-        const text = this.createText(`${v}°`, endX + mainScaleWidth, i === 0 ? endY - 5 : top, 'left', right.rightYScalevalue.style);
-        list.push(text);
-        // 刻度横线
-        const spaceHVaule0 = (endY - top1) / spaceScaleNumber; // 第一个-每华氏度之间的间隔高度值
-        for (let k = 0; k < spaceScaleNumber; k++) {
-          const scaleTop = i === 0 ? endY - k * spaceHVaule0 : top - k * spaceHVaule;
-          const line = new this.fabric.Line([endX, scaleTop, k > 0 ? endX + subScaleWidth : endX + mainScaleWidth, scaleTop], { ...defaultVaule.borderStyle });
-          list.push(line);
-        }
-      });
-
-      // 单位
-      const width = canvasWidth - endX;
-      const unit = right.rightYScalevalue.unit
-        ? this.createText(right.rightYScalevalue.unit.split('').join('\n'), endX + width / 2, endTop / 2, 'center', right.rightYScalevalue.style)
-        : null;
-      unit && list.push(unit);
-
-      const group = list.length > 0 ? new this.fabric.Group([...list], { ...defaultVaule.style }) : null;
-      group && group.sendToBack(); // 向下跳底层
-      group && this.canvas.add(group);
-    },
-    createText(text, left, top, originX, style) {
-      return new this.fabric.Text(String(text), {
-        ...this.defaultTextStyle,
-        left,
-        top,
-        originX,
-        ...style
-      });
-    }
-  },
-  render(h) {
-    return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  }
-};
-</script>

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

@@ -1,172 +0,0 @@
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import defaultVaule from '../const/defaultVaule';
-
-export default {
-  name: 'fabric-top2',
-  mixins: [fabricCommon, draw],
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  computed: {
-    girdLineStyle() {
-      return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
-    }
-  },
-  methods: {
-    init() {
-      this.drawTop(this.templateData.top);
-      this.canvas.renderAll();
-    },
-    drawTop(top) {
-      let list = [];
-      // 日期
-      this.drawTopDate(top, list);
-      // 上午/下午
-      this.drawTopDay(top, list);
-      // 时间刻度
-      this.drawTopTime(top, list);
-      const group = list.length > 0 ? new this.fabric.Group([...list], { ...defaultVaule.style }) : null;
-      group && group.sendToBack(); // 向下跳底层
-      group && this.canvas.add(group);
-    },
-    drawTopTime(top, list) {
-      const { originX, originY, xCellWidth, table } = this.propItems;
-      const dateHeight = top.date?.height || 0;
-      const dayHeight = top.dayHeight || 0;
-      const height = originY - dateHeight - dayHeight;
-      const titleHeight = dayHeight + height;
-      // 标题
-      const title = this.drawTextGroup(
-        {
-          width: originX,
-          height: titleHeight,
-          ...defaultVaule.rectStyle
-        },
-        {
-          text: String(top.xScalevalue.title),
-          ...defaultVaule.textStyle,
-          ...top.textGroupStyle
-        },
-        {
-          left: 0,
-          top: dateHeight
-        }
-      );
-      list.push(title);
-
-      // 时间列表
-      let timeList = [];
-      for (let j = 0; j < table.mainXCell; j++) {
-        timeList.push(top.xScalevalue.list);
-      }
-      timeList.flat().forEach((v, i) => {
-        const left = originX + i * xCellWidth;
-        const textGroup = this.drawTextGroup(
-          {
-            width: xCellWidth,
-            height
-          },
-          {
-            text: String(v),
-            ...defaultVaule.textStyle,
-            ...top.textGroupStyle
-          },
-          {
-            left,
-            top: dateHeight + dayHeight
-          }
-        );
-        list.push(textGroup);
-      });
-    },
-    drawTopDay(top, list) {
-      if (!top.dayHeight) return false;
-      const { originX, xCellWidth, gridXNumber, table } = this.propItems;
-      const height = top.dayHeight;
-      // 上午下午列表
-      const width = xCellWidth * table.subSecondXCell;
-      const dayList = gridXNumber / table.subSecondXCell;
-      for (let i = 0; i < dayList; i++) {
-        const left = originX + i * width;
-        const value = i % 2 === 0 ? '上午' : '下午';
-        const textGroup = this.drawTextGroup(
-          {
-            width,
-            height
-          },
-          {
-            text: String(value),
-            ...defaultVaule.textStyle,
-            ...top.textGroupStyle
-          },
-          {
-            left,
-            top: top.date.height || 0
-          }
-        );
-        list.push(textGroup);
-      }
-    },
-    drawTopDate(top, list) {
-      if (!top.date.height) return false;
-      const { originX, xCellWidth, table } = this.propItems;
-      const height = top.date.height;
-      // 标题
-      const title = this.drawTextGroup(
-        {
-          width: originX,
-          height,
-          ...defaultVaule.rectStyle
-        },
-        {
-          text: String(top.date.title),
-          ...defaultVaule.textStyle,
-          ...top.textGroupStyle
-        },
-        {
-          left: 0,
-          top: 0
-        }
-      );
-      list.push(title);
-      // 日期列表
-      const width = xCellWidth * table.subXCell;
-      top.date.list.forEach((v, i) => {
-        const left = originX + i * width;
-        const textGroup = this.drawTextGroup(
-          {
-            width,
-            height
-          },
-          {
-            text: String(v),
-            ...defaultVaule.textStyle,
-            ...top.textGroupStyle
-          },
-          {
-            left,
-            top: 0
-          }
-        );
-        list.push(textGroup);
-      });
-    }
-  },
-  render(h) {
-    return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  }
-};
-</script>

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

@@ -1,290 +0,0 @@
-import {
-  isNumber,
-  isObject
-} from './type';
-
-export default {
-  name: 'draw',
-  data() {
-    return {
-      defaultLineStyle: {
-        stroke: '#000',
-        strokeWidth: 1,
-        strokeDashArray: [0, 0],
-        evented: false,
-        selectable: false
-      },
-      defaultRectStyle: {
-        fill: 'transparent',
-        stroke: '#999',
-        strokeWidth: 1,
-        originX: 'center',
-        originY: 'center'
-      },
-      defaultTextStyle: {
-        fontFamily: '微软雅黑',
-        fontSize: 12,
-        fill: '#000',
-        centeredRotation: true,
-        originX: 'center',
-        originY: 'center',
-        lineHeight: 1
-      },
-      defaultGroupStyle: {
-        evented: false,
-        selectable: false
-      },
-    };
-  },
-  components: {},
-  methods: {
-    // 绘制线
-    drawLine(points, style) {
-      if (!Array.isArray(points)) return null; // 坐标点非数组
-      if (points.length < 4) return null; // 坐标点位数不足 无法完成线的绘制
-      if (points.filter(point => isNumber(point)).length < 4) return null; // 坐标点内可用数值不足 无法完成线的绘制
-      const lineStyle = this.isObject(style) ? {
-        ...style
-      } : {};
-      return new this.fabric.Line(points, {
-        ...this.defaultLineStyle,
-        ...lineStyle
-      });
-    },
-    // 绘制点
-    // drawPoint(points, style) {
-    //     console.log(points, style);
-    // },
-    // 绘制文本区
-    drawTextGroup(rectStyle, fontStyle, groupStyle) {
-      const rect_style = this.isObject(rectStyle) ? {
-        ...rectStyle
-      } : {};
-      const font_style = this.isObject(fontStyle) ? {
-        ...fontStyle
-      } : {};
-      const group_style = this.isObject(groupStyle) ? {
-        ...groupStyle
-      } : {
-        left: 0,
-        top: 0
-      };
-      if (!this.isNumber(rect_style.width) || !this.isNumber(rect_style.height)) return null; // rect容器宽高必须全部是可用数字类型 否则无法画出正确的容器
-
-      !this.isNumber(group_style.left) && (group_style.left = 0);
-      !this.isNumber(group_style.top) && (group_style.top = 0);
-
-      font_style.originY = font_style.originY === 'top' ? 'bottom' : font_style.originY === 'bottom' ? 'top' : 'center';
-      font_style.originX = font_style.originX === 'left' ? 'right' : font_style.originX === 'right' ? 'left' : 'center';
-
-      const rect = new this.fabric.Rect({
-        ...this.defaultRectStyle,
-        ...rect_style
-      });
-      const texts = new this.fabric.Text(font_style.text, {
-        ...this.defaultTextStyle,
-        ...font_style
-      });
-      return new this.fabric.Group([rect, texts], {
-        ...this.defaultGroupStyle,
-        ...group_style
-      });
-    },
-    isNumber(num) {
-      return isNumber(num);
-    },
-    isObject(obj) {
-      return isObject(obj);
-    },
-    /**
-     * @description: 根据svg生成image Dom对象
-     * @param n*o iconClassName
-     * @param n*o others
-     * @return n*o
-     */
-    createImage(iconClassName, others) {
-      // 第一个参数是SVG字符串，第二个参数是回调函数
-      // fabric.loadSVGFromString('...', function(objects, options) {
-      //   var obj = fabric.util.groupSVGElements(objects, options);
-      //   canvas.add(obj).renderAll();
-      // });
-      // fabric.loadSVGFromURL的工作方式相同，只不过您传递的是包含URL而不是SVG内容的字符串
-      return new Promise((resolve, reject) => {
-        const svg = document.querySelector(iconClassName).querySelector('svg');
-        svg.setAttribute('version', 1.1);
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svg.style.color = others.color || '#000';
-        svg.style.fontSize = others.fontSize || '14px';
-        const str = svg.parentNode.innerHTML;
-        const src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(str)));
-        const img = document.createElement('img');
-        img.setAttribute('src', src);
-        img.onload = () => {
-          resolve(img);
-        }
-      })
-    },
-    // 画出+
-    createAdd(data) {
-      const width = data.width || 10;
-      const height = data.height || 10;
-      const line1 = new this.fabric.Line([0, height / 2, width, height / 2], {
-        ...data,
-        angle: 0
-      });
-      const line2 = new this.fabric.Line([width / 2, 0, width / 2, height], {
-        ...data,
-        angle: 0
-      });
-      return new this.fabric.Group([line1, line2], {
-        scale: 1,
-        ...data,
-      })
-    },
-    // 画出圆边框
-    createCircleBorder(data) {
-      return new this.fabric.Circle({
-        objectCaching: false,
-        strokeWidth: 1,
-        radius: data.width / 2,
-        scale: 1,
-        fill: '#fff',
-        ...data,
-      });
-    },
-    // 画出v
-    createArrow(data) {
-      const width = data.width || 10;
-      const height = data.height || 10;
-      return new this.fabric.Polyline([
-        { x: 0, y: 0 },
-        { x: width / 2, y: height },
-        { x: width, y: 0 },
-      ], {
-        scale: 1,
-        ...data,
-      })
-    },
-    ceateLineArrow(data) {
-      const line = new this.fabric.Line([data.left, data.top, data.left + data.width, data.top], {
-        stroke: data.stroke,
-        strokeWidth: data.strokeWidth
-      });
-      const arrow = this.createArrow({
-        fill: 'transparent',
-        width: data.arrowwidth || 3,
-        height: data.arrowheight || 3,
-        stroke: data.stroke,
-        originX: 'center',
-        originY: 'center',
-        left: data.left + data.width - data.arrowwidth,
-        top: data.top,
-        angle: 270
-      });
-      return new this.fabric.Group([line, arrow], {
-        scale: 1,
-        ...data,
-      });
-    },
-    async createPoint(type, data) {
-      let obj1, obj2;
-      switch (type) {
-        case 'triangle':
-          // 三角形
-          return new this.fabric.Triangle({
-            width: 20,
-            height: 20,
-            strokeWidth: 1,
-            scale: 1,
-            ...data
-          });
-        case 'circle':
-          return new this.fabric.Circle({
-            objectCaching: false,
-            strokeWidth: 1,
-            radius: 5,
-            scale: 1,
-            ...data
-          });
-        case 'img':
-          // 图片
-          return await new Promise((resolve, reject) => {
-            const common = {
-              originX: 'center',
-              originY: 'center',
-              ...data,
-            };
-            if (data.url) {
-              this.fabric.Image.fromURL(data.url, function (img) {
-                const {
-                  width,
-                  height
-                } = img;
-                img.set({
-                  ...common,
-                  scaleX: (data.width || width) / width,
-                  scaleY: (data.height || height) / height,
-                  width: width || data.width,
-                  height: height || data.height,
-                  scale: (data.width || width) / width,
-                });
-                resolve(img);
-              });
-            } else {
-              delete common.stroke;
-              const img = new this.fabric.Image(data.ele, {
-                ...common,
-                scale: 1
-              });
-              resolve(img);
-            }
-          });
-        case 'arrow':
-          return this.createArrow(data);
-        case '+':
-          return this.createAdd(data);
-        case 'shjs':
-          obj1 = this.createAdd(data);
-          obj2 = this.createCircleBorder(data);
-          return new this.fabric.Group([obj2, obj1], {
-            scale: 1,
-            ...data,
-            angle: 0
-          })
-        case 'shks':
-          obj1 = new this.fabric.Circle({
-            objectCaching: false,
-            radius: data.width / 5,
-            fill: data.stroke || '#000',
-            originX: 'center',
-            originY: 'center',
-            left: data.left,
-            top: data.top
-          });
-          obj2 = this.createCircleBorder(data);
-          return new this.fabric.Group([obj2, obj1], {
-            scale: 1,
-            ...data,
-          })
-        case 'cg':
-          obj1 = this.ceateLineArrow(data);
-          obj2 = this.createCircleBorder(data);
-          return new this.fabric.Group([obj2, obj1], {
-            scale: 1,
-            ...data,
-          })
-        default:
-          // 文字(默认:比如 type === x)
-          data.stroke && delete data.stroke;
-          return new this.fabric.Text(String(type), {
-            fontFamily: '微软雅黑',
-            scale: 1,
-            fontSize: 14,
-            fill: '#000',
-            ...data,
-          })
-          
-      }
-    },
-  }
-};