cnhis-design-vue 3.1.9-beta.11 → 3.1.9-beta.12

package/es/packages/fabric-chart/src/FabricChart.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,16 @@
-import { defineComponent, ref, computed, reactive, provide, onMounted, openBlock, createElementBlock, createElementVNode } from 'vue';
+import { defineComponent, ref, computed, reactive, provide, onMounted, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
 import { fabric } from 'fabric';
+import './Center.js';
+import './Top.js';
+import { InjectionCanvas, InjectionPropItems } from './interface.js';
+import script$1 from './Top.vue_vue_type_script_setup_true_lang.js';
+import script$2 from './Center.vue_vue_type_script_setup_true_lang.js';
 
 const _hoisted_1 = { class: "c-fabric-chart" };
 var script = /* @__PURE__ */ defineComponent({
   __name: "FabricChart",
   props: {
-    data: { type: Object, required: true }
+    data: { type: null, required: true }
   },
   setup(__props) {
     const props = __props;
@@ -91,6 +96,8 @@ var script = /* @__PURE__ */ defineComponent({
     const propItems = reactive({
       canvasWidth: props.data.width,
       canvasHeight: props.data.height,
+      grid: props.data.grid,
+      top: props.data.top,
       gridXNumber: gridXNumber.value,
       gridYNumber: gridYNumber.value,
       originX: originX.value,
@@ -106,8 +113,8 @@ var script = /* @__PURE__ */ defineComponent({
       centigradeYCell: centigradeYCell.value,
       event: event.value
     });
-    provide("canvas", canvas);
-    provide("propItems", propItems);
+    provide(InjectionCanvas, canvas);
+    provide(InjectionPropItems, propItems);
     onMounted(() => {
       canvas.value = new fabric.Canvas(canvasRef.value, {
         width: propItems.canvasWidth,
@@ -123,7 +130,9 @@ var script = /* @__PURE__ */ defineComponent({
         createElementVNode("canvas", {
           ref_key: "canvasRef",
           ref: canvasRef
-        }, null, 512)
+        }, null, 512),
+        createVNode(script$1),
+        createVNode(script$2)
       ]);
     };
   }

package/es/packages/fabric-chart/src/Top.js

@@ -0,0 +1,4 @@
+import script from './Top.vue_vue_type_script_setup_true_lang.js';
+export { default } from './Top.vue_vue_type_script_setup_true_lang.js';
+
+script.__file = "packages/fabric-chart/src/Top.vue";

package/es/packages/fabric-chart/src/Top.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,128 @@
+import { defineComponent, inject, onMounted, nextTick } from 'vue';
+import { fabric } from 'fabric';
+import { defaultStyle, drawTextGroup, defaultTextStyle, defaultRectStyle } from './hooks/useDraw.js';
+import { InjectionCanvas, InjectionPropItems } from './interface.js';
+
+var script = /* @__PURE__ */ defineComponent({
+  __name: "Top",
+  setup(__props) {
+    const canvas = inject(InjectionCanvas);
+    const propItems = inject(InjectionPropItems);
+    const { originY, grid, originX, xCellWidth, gridXNumber, top } = propItems;
+    function drawTop() {
+      let list = [];
+      drawTopDate(top, list);
+      drawTopDay(top, list);
+      drawTopTime(top, list);
+      const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+      group && group.sendToBack();
+      group && canvas.value.add(group);
+    }
+    function drawTopTime(top2, list) {
+      var _a, _b;
+      const dateHeight = ((_a = top2.date) == null ? void 0 : _a.height) || 0;
+      const dayHeight = top2.dayHeight || 0;
+      const height = originY - dateHeight - dayHeight;
+      const titleHeight = dayHeight + height;
+      const title = drawTextGroup({
+        width: originX,
+        height: titleHeight,
+        ...defaultRectStyle
+      }, {
+        ...defaultTextStyle,
+        ...((_b = top2.date) == null ? void 0 : _b.style) || {}
+      }, {
+        left: 0,
+        top: dateHeight
+      }, top2.xScalevalue.title);
+      list.push(title);
+      let timeList = [];
+      for (let j = 0; j < grid.mainXCell; j++) {
+        timeList.push(top2.xScalevalue.list);
+      }
+      timeList.flat().forEach((v, i) => {
+        var _a2;
+        const left = originX + i * xCellWidth;
+        const textGroup = drawTextGroup({
+          width: xCellWidth,
+          height
+        }, {
+          ...defaultTextStyle,
+          ...((_a2 = top2.date) == null ? void 0 : _a2.style) || {}
+        }, {
+          left,
+          top: dateHeight + dayHeight
+        }, v);
+        list.push(textGroup);
+      });
+    }
+    function drawTopDay(top2, list) {
+      var _a;
+      if (!top2.dayHeight)
+        return false;
+      const height = top2.dayHeight;
+      const width = xCellWidth * grid.subSecondXCell;
+      const dayList = gridXNumber / grid.subSecondXCell;
+      for (let i = 0; i < dayList; i++) {
+        const left = originX + i * width;
+        const value = i % 2 === 0 ? "\u4E0A\u5348" : "\u4E0B\u5348";
+        const textGroup = drawTextGroup({
+          width,
+          height
+        }, {
+          ...defaultTextStyle,
+          ...((_a = top2.date) == null ? void 0 : _a.style) || {}
+        }, {
+          left,
+          top: top2.date.height || 0
+        }, value);
+        list.push(textGroup);
+      }
+    }
+    function drawTopDate(top2, list) {
+      var _a;
+      if (!top2.date.height)
+        return false;
+      const height = top2.date.height;
+      const title = drawTextGroup({
+        width: originX,
+        height,
+        ...defaultRectStyle
+      }, {
+        ...defaultTextStyle,
+        ...((_a = top2.date) == null ? void 0 : _a.style) || {}
+      }, {
+        left: 0,
+        top: 0
+      }, top2.date.title);
+      list.push(title);
+      const width = xCellWidth * grid.subXCell;
+      top2.date.list.forEach((v, i) => {
+        var _a2;
+        const left = originX + i * width;
+        const textGroup = drawTextGroup({
+          width,
+          height
+        }, {
+          ...defaultTextStyle,
+          ...((_a2 = top2.date) == null ? void 0 : _a2.style) || {}
+        }, {
+          left,
+          top: 0
+        }, v);
+        list.push(textGroup);
+      });
+    }
+    onMounted(() => {
+      nextTick(() => {
+        drawTop();
+        canvas.value.renderAll();
+      });
+    });
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+
+export { script as default };

package/es/packages/fabric-chart/src/hooks/useDraw.d.ts

@@ -0,0 +1,35 @@
+import { fabric } from 'fabric';
+export declare const defaultStyle: {
+    evented: boolean;
+    selectable: boolean;
+};
+export declare const defaultLineStyle: {
+    evented: boolean;
+    selectable: boolean;
+    stroke: string;
+    strokeWidth: number;
+    strokeDashArray: number[];
+};
+export declare const defaultRectStyle: {
+    evented: boolean;
+    selectable: boolean;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    originX: string;
+    originY: string;
+};
+export declare const defaultTextStyle: {
+    evented: boolean;
+    selectable: boolean;
+    fontFamily: string;
+    fontSize: number;
+    fill: string;
+    centeredRotation: boolean;
+    originX: string;
+    originY: string;
+    lineHeight: number;
+};
+export declare function drawLine(points: number[], style: Partial<fabric.ILineOptions>): fabric.Line | null;
+export declare function drawTextGroup(rectStyle: Partial<fabric.IRectOptions>, fontStyle: Partial<fabric.ITextOptions>, groupStyle: Partial<fabric.IGroupOptions>, text: string | number): fabric.Group | null;
+export declare function drawPoint(type: string, style: any): fabric.Triangle | fabric.Circle | undefined;

package/es/packages/fabric-chart/src/hooks/useDraw.js

@@ -0,0 +1,75 @@
+import { fabric } from 'fabric';
+
+const defaultStyle = {
+  evented: false,
+  selectable: false
+};
+const defaultLineStyle = {
+  stroke: "#000",
+  strokeWidth: 1,
+  strokeDashArray: [0, 0],
+  ...defaultStyle
+};
+const defaultRectStyle = {
+  fill: "transparent",
+  stroke: "#999",
+  strokeWidth: 1,
+  originX: "center",
+  originY: "center",
+  ...defaultStyle
+};
+const defaultTextStyle = {
+  fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
+  fontSize: 12,
+  fill: "#000",
+  centeredRotation: true,
+  originX: "center",
+  originY: "center",
+  lineHeight: 1,
+  ...defaultStyle
+};
+function drawLine(points, style) {
+  if (!Array.isArray(points))
+    return null;
+  if (points.length < 4)
+    return null;
+  return new fabric.Line(points, {
+    ...defaultLineStyle,
+    ...style
+  });
+}
+function drawTextGroup(rectStyle, fontStyle, groupStyle, text) {
+  const rect = new fabric.Rect({
+    ...defaultRectStyle,
+    ...rectStyle
+  });
+  const texts = new fabric.Text(String(text), {
+    ...defaultTextStyle,
+    ...fontStyle
+  });
+  return new fabric.Group([rect, texts], {
+    ...groupStyle
+  });
+}
+function drawPoint(type, style) {
+  switch (type) {
+    case "triangle":
+      return new fabric.Triangle({
+        width: 20,
+        height: 20,
+        strokeWidth: 1,
+        scale: 1,
+        ...style
+      });
+    case "circle":
+      return new fabric.Circle({
+        objectCaching: false,
+        strokeWidth: 1,
+        radius: 5,
+        scale: 1,
+        ...style
+      });
+  }
+}
+
+export { defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup };

package/es/packages/fabric-chart/src/hooks/useGrid.d.ts

@@ -0,0 +1 @@
+export default function useGrid(drawLine: Function): void;

package/es/packages/fabric-chart/src/hooks/useGrid.js

@@ -0,0 +1,47 @@
+import { inject, onMounted, nextTick } from 'vue';
+import { fabric } from 'fabric';
+import { InjectionCanvas, InjectionPropItems } from '../interface.js';
+
+function useGrid(drawLine) {
+  const canvas = inject(InjectionCanvas);
+  const propItems = inject(InjectionPropItems);
+  const { gridYNumber, originY, grid, originX, endX, xCellWidth, yCellHeight, gridXNumber, endY } = propItems;
+  const yList = [];
+  const xList = [];
+  for (let i = 0; i <= gridYNumber; i++) {
+    const y = originY + parseInt(String(yCellHeight * (gridYNumber - i)));
+    const style = i % grid.subYCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
+    yList.push(drawLine([originX, y, endX, y], {
+      id: i + "_" + new Date().getTime(),
+      ...style
+    }));
+  }
+  for (let i = 0; i <= gridXNumber; i++) {
+    const x = originX + parseInt(String(xCellWidth * i));
+    let style;
+    style = i % grid.subXCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
+    if (i % grid.subSecondXCell === 0) {
+      style = grid.subSecondLineStyle || {};
+    }
+    if (i % grid.subXCell === 0) {
+      style = grid.mainLineStyle || {};
+    }
+    xList.push(drawLine([x, originY, x, endY], {
+      id: i + "_" + new Date().getTime(),
+      ...style
+    }));
+  }
+  const group = new fabric.Group([...xList, ...yList], {
+    evented: false,
+    selectable: false
+  });
+  onMounted(() => {
+    nextTick(() => {
+      canvas.value.add(group);
+      canvas.value.sendToBack(group);
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useGrid as default };

package/es/packages/fabric-chart/src/interface.d.ts

@@ -0,0 +1,80 @@
+import { InjectionKey, Ref } from 'vue';
+import { fabric } from 'fabric';
+interface IEvent {
+    selectable: boolean;
+    evented: boolean;
+}
+interface IGrid {
+    mainXCell: number;
+    subXCell: number;
+    subSecondXCell: number;
+    mainYCell: number;
+    subYCell: number;
+    mainLineStyle?: fabric.ILineOptions;
+    subLineStyle?: fabric.ILineOptions;
+    subSecondLineStyle?: fabric.ILineOptions;
+    event?: Partial<IEvent>;
+}
+interface IPropItems {
+    canvasWidth: number;
+    canvasHeight: number;
+    grid: IGrid;
+    top: ITop;
+    gridXNumber: number;
+    gridYNumber: number;
+    originX: number;
+    originY: number;
+    endX: number;
+    endY: number;
+    xCellWidth: number;
+    yCellHeight: number;
+    xScaleList: Array<string | number>;
+    xScaleCell: number;
+    breatheYCell: number;
+    pulseYCell: number;
+    centigradeYCell: number;
+    event: Partial<IEvent>;
+}
+interface IPoint {
+    time: string;
+    value: string | number;
+}
+interface IOther {
+    style?: fabric.ITextOptions;
+    list: Array<IPoint>;
+}
+interface IDate {
+    title: string;
+    height?: number;
+    list: Array<string | number>;
+    style?: fabric.ITextOptions;
+}
+interface ITop {
+    dateStyle?: fabric.ITextOptions;
+    titleWidth: number;
+    date: IDate;
+    xScalevalue: IDate;
+    dayHeight?: number;
+}
+interface ILeft {
+    spaceGridNumber?: number;
+    yScaleValue: Array<any>;
+}
+interface IRight {
+    width?: number;
+    yScaleValue: any;
+}
+export interface IData {
+    width: number;
+    height: number;
+    borderStyle?: fabric.ILineOptions;
+    grid: IGrid;
+    other?: IOther;
+    top: ITop;
+    left: ILeft;
+    right?: IRight;
+    bottom?: any;
+}
+export declare const InjectionCanvas: InjectionKey<Ref<fabric.Canvas>>;
+export declare const InjectionPropItems: InjectionKey<IPropItems>;
+export {};

package/es/packages/fabric-chart/src/interface.js

@@ -0,0 +1,4 @@
+const InjectionCanvas = Symbol("canvas");
+const InjectionPropItems = Symbol("propItems");
+
+export { InjectionCanvas, InjectionPropItems };

package/es/packages/index.css

@@ -1126,6 +1126,16 @@ body > .vxe-table--tooltip-wrapper {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.n-dialog__title .svg-wrap {
+  margin: 0 0 0 auto;
+}
+.n-dialog__title .svg-wrap svg {
+  font-size: 14px;
+  cursor: pointer;
+}
+.n-dialog__title .svg-wrap svg + svg {
+  margin-left: 16px;
+}
 .c-chunk-upload-container {
   width: 100%;
   height: 100%;
@@ -1417,8 +1427,10 @@ body > .vxe-table--tooltip-wrapper {
   position: relative;
   top: 50%;
   left: 50%;
+  font-size: 46px;
   transform: translate(-50%, -50%);
   transition: all 0.25s ease-out;
+  cursor: pointer;
 }
 .c-icon-wrap .theme_outlined {
   display: inline-block;
@@ -1608,6 +1620,9 @@ body > .vxe-table--tooltip-wrapper {
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.65);
 }
+.c-scale.c-scale-nobtn {
+  padding-bottom: 4px;
+}
 .c-scale .scale-container {
   width: 100%;
   height: 100%;
@@ -2264,6 +2279,10 @@ body > .vxe-table--tooltip-wrapper {
   padding-top: 20px;
   line-height: 40px;
 }
+.video-js {
+  width: 100%;
+  height: 100%;
+}
 .video-js .vjs-time-control {
   display: block;
 }
@@ -2324,7 +2343,6 @@ body > .vxe-table--tooltip-wrapper {
 .vod-wrap .icon-play {
   color: #fff;
   opacity: 0.8;
-  transform: scale3d(2, 2, 2);
   transition: all 0.25s ease-out;
 }
 .player-wrap {
@@ -2376,7 +2394,6 @@ body > .vxe-table--tooltip-wrapper {
 .c-video-modal .c-playervod-wrap .vod-wrap .icon-play {
   color: #fff;
   opacity: 0.8;
-  transform: scale3d(2, 2, 2);
   transition: all 0.25s ease-out;
 }
 .c-video-modal .c-playervod-wrap .player-wrap {
@@ -2384,18 +2401,21 @@ body > .vxe-table--tooltip-wrapper {
   height: 100%;
   width: 100%;
 }
-.c-video-modal .c-player-video-modal .preview-wrap {
+.c-player-video-modal .preview-wrap {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.c-video-modal .c-player-video-modal .preview-wrap .preview {
+.c-player-video-modal .preview-wrap .preview {
   padding: 20px 0;
   width: 60vw;
   height: 100%;
 }
+.c-player-video-modal .preview-wrap .video-container {
+  height: 100%;
+}
 .vxe-table--footer-wrapper.body--wrapper::-webkit-scrollbar,
 .vxe-table--body-wrapper::-webkit-scrollbar {
   width: 10px;