HFLVComp组件库介绍

封装了一系列基础可视化组件，如文本组件、几何图形等。

组件安装&注册

bash

npm install hflvcomp

main中全局注册

javascript

import HflVComp from 'hflvcomp'

app.use(HflVComp)

其包含的组件有

组件	说明
Subpage	子页面容器
MultiSubpage	子页面容器组
CanvasPic	画布图片
SVGCircle	圆
SVGDataText	数据文本
SVGDateText	时间文本
SVGHLine	水平线
SVGRectangle	矩形
SVGTriangle	三角形
SVGVLine	垂直线
SVGWenBen	静态文本
SVGWenBen2	静态竖直文本
SVGRhombus	菱形
SVGLiquidFillBall	水球图
SVGFile	SVG加载器
SVGGradientLine	渐近线
GridTable	网格
Paragraph	段落
VEDivision	自定义DIV
VEDivisionButton	Div按钮
SVGFile2	SVG加载器2
VESimpleDataGrid	简单数据表格
SVGSlash	对角线
SVGArrow	箭头
SVGDArrow	双箭头
SVGDataStatus	数据状态

组件配置

TIP

下面组件配置中图标需要根据自身项目配置进行修改，其他属性初始值也可以自己调整

SVGHLine(水平线)

json

{
  "component": "SVGHLine",
  "label": "横线",
  "icon": "svghline",
  "propValue": {
    "strokeColor": "rgba(245, 10, 10, 1)",
    "strokeWidth": 1,
    "strokeDasharray": "",
    "animate": false,
    "animateFrom": 0,
    "animateTo": 10,
    "animateDur": 1
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted"
  ],
  "style": {
    "width": 200,
    "height": 10
  }
}

SVGVLine(垂直线)

json

{
  "component": "SVGVLine",
  "label": "竖线",
  "icon": "svgvline",
  "propValue": {
    "strokeColor": "rgba(245, 10, 10, 1)",
    "strokeWidth": 1,
    "strokeDasharray": "",
    "animate": false,
    "animateFrom": 0,
    "animateTo": 10,
    "animateDur": 1
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted"
  ],
  "style": {
    "width": 10,
    "height": 200
  }
}

SVGSlash(对角线)

json

{
  "component": "SVGSlash",
  "label": "斜线",
  "icon": "svgwenben2",
  "propValue": {
    "diagonalDown": false,
    "strokeColor": "rgba(245, 10, 10, 1)",
    "strokeWidth": 1,
    "strokeDasharray": "",
    "animate": false,
    "animateFrom": 0,
    "animateTo": 10,
    "animateDur": 1,
    "dycFlag": false,
    "lineColorRule": "",
    "colorCK": "",
    "lineColorKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 200,
    "height": 30
  }
}

SVGTriangle(三角形)

json

{
  "component": "SVGTriangle",
  "label": "三角形",
  "icon": "svgtriangle",
  "propValue": {
    "strokeColor": "rgba(245, 10, 10, 1)",
    "strokeWidth": 1,
    "fillColor": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 200,
    "height": 200
  }
}

SVGRectangle(矩形)

json

{
  "component": "SVGRectangle",
  "label": "矩形",
  "icon": "svgrectangle",
  "propValue": {
    "strokeColor": "rgba(35,95,167,1)",
    "strokeWidth": 1,
    "fillColor": "rgba(35,95,167,1)",
    "rx": 0,
    "ry": 0,
    "fillOpacity": 1,
    "strokeOpacity": 1,
    "strokeDasharray": "",
    "hasGradient": false,
    "gradientType": "linear",
    "gradientX1": 0,
    "gradientY1": 0,
    "gradientX2": 100,
    "gradientY2": 100,
    "gradientCx": 50,
    "gradientCy": 50,
    "gradientR": 50,
    "gradientFx": 50,
    "gradientFy": 50,
    "gradientStopsOffset": 0,
    "gradientStopsColor": "rgba(35,95,167,1)",
    "gradientStopsOffset2": 100,
    "gradientStopsColor2": "rgba(79,210,221,1)"
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 400,
    "height": 300
  }
}

SVGRhombus(菱形)

json

{
  "component": "SVGRhombus",
  "label": "菱形",
  "icon": "svgrhombus",
  "propValue": {
    "tilt": "right",
    "offsetLen": 0,
    "strokeColor": "rgba(35,95,167,1)",
    "strokeWidth": 1,
    "fillColor": "rgba(35,95,167,1)",
    "fillOpacity": 1,
    "strokeOpacity": 1,
    "strokeDasharray": "",
    "hasGradient": false,
    "gradientType": "linear",
    "gradientX1": 0,
    "gradientY1": 0,
    "gradientX2": 100,
    "gradientY2": 100,
    "gradientCx": 50,
    "gradientCy": 50,
    "gradientR": 50,
    "gradientFx": 50,
    "gradientFy": 50,
    "gradientStopsOffset": 0,
    "gradientStopsColor": "rgba(35,95,167,1)",
    "gradientStopsOffset2": 100,
    "gradientStopsColor2": "rgba(79,210,221,1)"
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 400,
    "height": 300
  }
}

SVGCircle(圆形)

json

{
  "component": "SVGCircle",
  "label": "圆形",
  "icon": "svgcircle",
  "propValue": {
    "strokeColor": "rgba(245, 10, 10, 1)",
    "strokeWidth": 1,
    "fillColor": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 200,
    "height": 200
  }
}

SVGArrow(箭头)

json

{
  "component": "SVGArrow",
  "label": "箭头",
  "icon": "svgwenben2",
  "propValue": {
    "strokeColor": "rgba(245, 10, 10, 1)",
    "strokeWidth": 1,
    "dycFlag": false,
    "lineColorRule": "",
    "colorCK": "",
    "lineColorKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 200,
    "height": 50
  }
}

SVGDArrow(双箭头)

json

{
  "component": "SVGDArrow",
  "label": "双箭头",
  "icon": "svgwenben2",
  "propValue": {
    "strokeColor": "rgba(245, 10, 10, 1)",
    "strokeWidth": 1,
    "gapRatio": 0.2,
    "dycFlag": false,
    "lineColorRule": "",
    "colorCK": "",
    "lineColorKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 200,
    "height": 50
  }
}

GridTable(网格)

json

{
  "component": "GridTable",
  "label": "网格表",
  "icon": "/pic/icon/grid.png",
  "propValue": {
    "rows": 5,
    "cols": 6,
    "autoResize": true,
    "cellHeight": 30,
    "cellWidth": 100,
    "borderStyle": {
      "color": "#187FC8",
      "width": 2,
      "dash": ""
    },
    "rowStyle": {
      "color": "#187FC8",
      "width": 2,
      "dash": ""
    },
    "colStyle": {
      "color": "#187FC8",
      "width": 2,
      "dash": ""
    },
    "diagonalStyle": {
      "color": "#187FC8",
      "width": 2,
      "dash": ""
    },
    "diagonalCells": [
      {
        "row": 0,
        "col": 0,
        "reverse": false
      }
    ]
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 100,
    "height": 100
  }
}

SVGWenBen(文本)

json

{
  "component": "SVGWenBen",
  "label": "文本",
  "icon": "svgwenben",
  "propValue": {
    "text": "文字",
    "hasBackground": true,
    "fillColor": "rgba(79,210,221,1)",
    "dx": "",
    "fontSize": 12,
    "fontFamily": "Arial",
    "fontWeight": "normal",
    "horizontalAlign": "center",
    "strokeColor": "rgba(79,210,221,1)",
    "strokeWidth": 1,
    "fontColor": "rgba(35,95,167,1)",
    "offsetX": 0,
    "rx": 0,
    "ry": 0,
    "fillOpacity": 1,
    "strokeOpacity": 1
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick",
    "timerTrigger",
    "bindRefreshTrigger",
    "onActivated"
  ],
  "style": {
    "width": 100,
    "height": 50
  }
}

SVGWenBen2(竖直文本)

json

{
  "component": "SVGWenBen2",
  "label": "竖直文本",
  "icon": "svgwenben2",
  "propValue": {
    "text": "文字",
    "verticalText": true,
    "translateX": 0,
    "translateY": 0,
    "hasBackground": true,
    "fillColor": "rgba(79,210,221,1)",
    "dx": "",
    "fontSize": 12,
    "fontFamily": "Arial",
    "fontWeight": "normal",
    "horizontalAlign": "center",
    "strokeColor": "rgba(79,210,221,1)",
    "strokeWidth": 1,
    "fontColor": "rgba(35,95,167,1)",
    "offsetX": 0,
    "rx": 0,
    "ry": 0,
    "fillOpacity": 1,
    "strokeOpacity": 1
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 100,
    "height": 50
  }
}

Paragraph(P标签)

json

{
  "component": "Paragraph",
  "label": "P标签",
  "icon": "/pic/icon/Paragraph.png",
  "propValue": {
    "text": "P标签",
    "fontColor": "rgb(0, 0, 0)",
    "fontSize": 14,
    "fontWeight": "normal",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "textAlign": "left"
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 200,
    "height": 30
  }
}

SVGDataText(数据文本)

json

{
  "component": "SVGDataText",
  "label": "数据文本",
  "icon": "svgdata",
  "propValue": {
    "hasBackground": true,
    "fillColor": "rgba(79,210,221,1)",
    "dx": "",
    "fontSize": 12,
    "fontFamily": "Arial",
    "fontWeight": "normal",
    "horizontalAlign": "center",
    "strokeColor": "rgba(79,210,221,1)",
    "strokeWidth": 1,
    "fontColor": "rgba(35,95,167,1)",
    "attrKey": "",
    "valueType": 1,
    "fractionDigits": 0,
    "dateformat": "yyyy-MM-dd",
    "weekMode": "",
    "convertGMT0": false,
    "offsetX": 0,
    "unit": "",
    "factor": 1,
    "showTooltip": true,
    "tooltipEffect": "dark",
    "tooltipPlacement": "bottom-start",
    "dataCK": "",
    "timeCK": "",
    "valueKey": "",
    "timeKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 100,
    "height": 50
  }
}

SVGDateText(时间文本)

json

{
  "component": "SVGDateText",
  "label": "动态时间",
  "icon": "svgtime",
  "propValue": {
    "hasBackground": true,
    "fillColor": "rgba(79,210,221,1)",
    "dx": "",
    "fontSize": 12,
    "fontFamily": "Arial",
    "fontWeight": "normal",
    "horizontalAlign": "center",
    "strokeColor": "rgba(79,210,221,1)",
    "strokeWidth": 1,
    "fontColor": "rgba(35,95,167,1)",
    "dateformat": "yyyy-MM-dd HH:mm:ss",
    "weekMode": "",
    "offsetX": 0
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 100,
    "height": 50
  }
}

SVGDataStatus(数据状态)

json

{
  "component": "SVGDataStatus",
  "label": "数据状态",
  "icon": "svgdata",
  "propValue": {
    "fillColor": "rgba(114, 114, 114, 1)",
    "dycFlag": false,
    "fillColorRule": "",
    "showTooltip": true,
    "tooltipEffect": "dark",
    "tooltipPlacement": "bottom-start",
    "dataCK": "",
    "timeCK": "",
    "valueKey": "",
    "timeKey": "",
    "colorCK": "",
    "fillColorKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 30,
    "height": 30
  }
}

SVGFile(SVG加载器)

json

{
  "component": "SVGFile",
  "label": "SVG加载器",
  "icon": "data:image/png;base64,...",
  "propValue": {
    "svgFile": "",
    "firstColor": "",
    "secondColor": "",
    "thirdColor": "",
    "fourColor": "",
    "fiveColor": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 100,
    "height": 100
  }
}

SVGFile2(SVG加载器2)

json

{
  "component": "SVGFile2",
  "label": "SVG加载器2",
  "icon": "/pic/icon/fileSvg.png",
  "propValue": {
    "svgFile": "",
    "cacheKey": "",
    "firstColor": "",
    "secondColor": "",
    "thirdColor": "",
    "fourColor": "",
    "fiveColor": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick",
    "onMouseDblClick"
  ],
  "style": {
    "width": 100,
    "height": 100
  }
}

SVGLiquidFillBall(水球图)

json

{
  "component": "SVGLiquidFillBall",
  "label": "水球图",
  "icon": "svgfill-liquid-ball",
  "propValue": {
    "fractionDigits": 0,
    "factor": 1,
    "fontSize": 14,
    "fontFamily": "Arial",
    "fontColor": "black",
    "strokeColor": "rgba(79,210,221,1)",
    "strokeColor2": "rgba(35,95,167,1)",
    "dataCK": "",
    "valueKey": "",
    "value": 0
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted"
  ],
  "style": {
    "width": 200,
    "height": 200
  }
}

CanvasPic(画布图片)

json

{
  "component": "CanvasPic",
  "label": "画布图片",
  "icon": "svgpicture",
  "propValue": {
    "flipHorizontal": false,
    "flipVertical": false,
    "url": "",
    "urlCK": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick",
    "onMouseDblClick"
  ],
  "style": {
    "width": 300,
    "height": 200
  }
}

VEDivision(自定义Div)

json

{
  "component": "VEDivision",
  "label": "自定义Div",
  "icon": "/pic/icon/Div.png",
  "propValue": {
    "divStyles": {
      "opacity": "1",
      "background": "linear-gradient(108deg, rgba(0, 102, 255, 0.1) 7%, rgba(0, 102, 255, 0.1) 35%, rgba(0, 155, 255, 0) 100%)",
      "box-sizing": "border-box",
      "border": "1px solid",
      "border-image": "linear-gradient(14deg, rgba(0, 123, 225, 0.47) 37%, rgba(0, 0, 0, 0) 81%)"
    }
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 400,
    "height": 300
  }
}

VEDivisionButton(Div按钮)

json

{
  "component": "VEDivisionButton",
  "label": "Div按钮",
  "icon": "/pic/icon/DivButton.png",
  "propValue": {
    "text": "按钮",
    "styles": {
      "background": "linear-gradient(180deg, rgba(0, 128, 254, 0.102) 0%, rgba(0, 128, 254, 0.1961) 100%)",
      "border": "1px solid #00BFFF"
    },
    "hoverStyles": {
      "background": "linear-gradient(180deg, #00BFFF 0%, rgba(0, 140, 254, 0.28) 100%)",
      "border": "1px solid #00BFFF"
    },
    "textStyles": {
      "font-family": "Alimama ShuHeiTi",
      "font-size": "16px",
      "font-weight": "bold",
      "line-height": "24.7px",
      "letter-spacing": "0px",
      "font-variation-settings": "'opsz' auto",
      "color": "#009BFF"
    },
    "hoverTextStyles": {
      "color": "#EFFAFF"
    }
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ],
  "style": {
    "width": 400,
    "height": 300
  }
}

Subpage

json

{
  "component": "Subpage",
  "label": "子页面容器",
  "icon": "svgsubpage",
  "propValue": {
    "subpageId": "",
    "subpageIdCK": "",
    "pageSource": "",
    "containerParam": {},
    "formatComponent": false
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted"
  ],
  "style": {
    "width": 400,
    "height": 300
  }
}

MultiSubpage(子页面容器组)

json

{
  "component": "MultiSubpage",
  "label": "子页面容器组",
  "icon": "svgsubpage",
  "propValue": {
    "staticData": true,
    "items": [],
    "dsCacheKey": "",
    "activeSubpageId": "",
    "activeSubpageIdCK": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted"
  ],
  "style": {
    "width": 400,
    "height": 300
  }
}

HFLVComp组件库介绍 ​

组件安装&注册 ​

组件配置 ​

SVGHLine(水平线) ​

SVGVLine(垂直线) ​

SVGSlash(对角线) ​

SVGTriangle(三角形) ​

SVGRectangle(矩形) ​

SVGRhombus(菱形) ​

SVGCircle(圆形) ​

SVGArrow(箭头) ​

SVGDArrow(双箭头) ​

GridTable(网格) ​

SVGWenBen(文本) ​

SVGWenBen2(竖直文本) ​

Paragraph(P标签) ​

SVGDataText(数据文本) ​

SVGDateText(时间文本) ​

SVGDataStatus(数据状态) ​

SVGFile(SVG加载器) ​

SVGFile2(SVG加载器2) ​

SVGLiquidFillBall(水球图) ​

CanvasPic(画布图片) ​

VEDivision(自定义Div) ​

VEDivisionButton(Div按钮) ​

Subpage ​

MultiSubpage(子页面容器组) ​

HFLVComp组件库介绍

组件安装&注册

组件配置

SVGHLine(水平线)

SVGVLine(垂直线)

SVGSlash(对角线)

SVGTriangle(三角形)

SVGRectangle(矩形)

SVGRhombus(菱形)

SVGCircle(圆形)

SVGArrow(箭头)

SVGDArrow(双箭头)

GridTable(网格)

SVGWenBen(文本)

SVGWenBen2(竖直文本)

Paragraph(P标签)

SVGDataText(数据文本)

SVGDateText(时间文本)

SVGDataStatus(数据状态)

SVGFile(SVG加载器)

SVGFile2(SVG加载器2)

SVGLiquidFillBall(水球图)

CanvasPic(画布图片)

VEDivision(自定义Div)

VEDivisionButton(Div按钮)

Subpage

MultiSubpage(子页面容器组)