资源负荷组件

使用说明

资源负荷组件主要用于业务中展示人员负荷信息，可以直接引入使用用于资源负荷功能的开发。 同时也向业务甘特图提供，支持业务甘特图的资源负荷展示。

支持功能点

• 支持柱状图数据展示(包含柱状图数据显隐)
• 支持折线图数据展示
• 支撑折线图和柱状图动态切换
• 支持自定义列信息的传入
• 支撑鼠标 Tip 信息显示
• 支撑单元格点击事件
• 支持是否显示分页器
• 支持右上方查询条件自定义实现
• 支持下方右下方提示信息自定义
• 支持 tableHeader(标题栏)自定义样式(背景、边线、文字样式)
• 支持 tableBody(内容区)自定义样式(背景、边线、文字样式)
• 支持折线图自定义样式(折线图颜色)
• tableBody 单元格增加鼠标滑过样式
• 支持鼠标滑过单元的 hover 效果

综合示例

loading

数据格式定义

关键数据详细说明

针对所需要的关键参数的数据格式进行详细描述，以便于开发人员能够更好的理解和使用。

传入的数据 props.data

{
  "rows": [
    // 每个对象必须含有id和load属性，load属性是数组，表示这一行的折线和柱状图数据
    {
      // resName和自定义列的dataIndex属性对应即可
      "resName": "  栾欣",
      "id": "PLM_PM_RESOBJ_429d849027414d81ab454f995223f491",
      // load数组的返回数据的顺序要和title日期的顺序保持一致
      "load": [
        {
          "date": "2023-05-31",
          "plan": {
            "totalLoad": 0,
            "standardLoad": 0,
            "overLoad": 7.28,
            "releaseLoad": 7.59
          },
          "actual": {
            "totalLoad": 0,
            "standardLoad": 8.85,
            "overLoad": 2.45
          }
        }
      ]
    }
  ],
  "title": [
    {
      "range": "2023.05.31--2023.06.01",
      // 返回的顺序要和load中日期顺序保持一致
      "days": [
        {
          "date": "2023-05-31",
          "dayOfWeek": "三",
          "today": true
        },
        {
          "date": "2023-06-01",
          "dayOfWeek": "四",
          "today": false
        }
      ]
    }
  ],
  "total": 63601, // 当开启分页是需要传入
  "page": 1, // 当开启分页是需要传入
  "pageSize": 10 // 当开启分页是需要传入
}

数据展示索引：props.rowDataIndexs

[
  {
    text: '计划正常负荷',
    groupIndex: 'plan', // 数据中load数组中每个对象数据分组的索引
    dataIndex: 'standardLoad', // 数据中load数组中每个对象数据分组中具体数据的索引
    bgColor: '#95D150',
    renderTypes: ['bar', 'line'], //渲染的类型
  },
  {
    text: '计划超出负荷',
    groupIndex: 'plan',
    dataIndex: 'overLoad',
    bgColor: '#F8C23C',
    renderTypes: ['bar'],
  },
  {
    text: '计划释放负荷',
    groupIndex: 'plan',
    dataIndex: 'releaseLoad',
    bgColor: '#999999',
    renderTypes: ['bar'],
  },
  {
    text: '实际正常负荷',
    groupIndex: 'actual',
    dataIndex: 'standardLoad',
    bgColor: '#4C9FE8',
    renderTypes: ['bar', 'line'],
  },
  {
    text: '实际超出负荷',
    groupIndex: 'actual',
    dataIndex: 'overLoad',
    bgColor: '#EE854B',
    renderTypes: ['bar'],
  },
];

自定义列：props.customColumns

[
  {
    width: 112,
    dataIndex: 'resName', // 是props.data.row数组每个对象的属性名
    text: '资源',
  },
  {
    width: 112,
    dataIndex: 'resName',
    text: '资源1',
  },
];

自定义查询

自定义查询实现方式

右上方得自定义查询使用 solt.customQuery 支持, 使用 demo 如下所示。

<template>
  <b-resource-load
    :data="resourceLoadData"
    :row-data-indexs="newRowsDataIndexs"
    :custom-columns="newCustomColumns"
    @clickChartCell="handleClickChart"
  >
    <template #customQuery> // [!code hl] // 自定义查询内容 // [!code hl] </template> // [!code hl]
  </b-resource-load>
</template>

注意

由于时间和进度问题，部分文档描述和部分参数格式描述未详细列出，请自行参考项目工程 Dome

API

HBResourceLoad 属性

参数	说明	类型	默认值
data	数据(见上放详情描述)	Object	{}
customColumns	自定义列(见上放详情描述)	Array	[]
rowDataIndexs	数据展示索引(见上放详情描述)	Array	[]
enablePagination	是否开启分页	Boolean	true
enableIndexColumn	是否开启序号列	Boolean	true
indexText	序号列标题	String	序号
indexColumnWidth	序号列宽度	Number	66
enableTip	是否开启鼠标 Tip	Boolean	true
headerColumnHeight	表头高度	Number	70
headerBgColor	表头背景颜色	String	#F5F6F7
headerBorderColor	表头边框颜色	String	#E8E8E8
headerFontStyle	表头文字样式	String	'normal bold 14px PingFang SC'
headerFontColor	表头文字颜色	String	'#000'
bodyBgColor	表格背景颜色	String	'#fff'
bodyBorderColor	表格边线颜色	String	'#E8E8E8'
bodyFontStyle	表格文字样式	String	'normal 12px PingFang SC'
bodyFontColor	表格文字颜色	String	'#000'
bodyCellHoverBgColor	表格滑过之后得 hover 背景颜色	String	'#F5F6F7'
barChartFontColor	柱状图中文字颜色	String	'#333'
lineDottedSize	折线图原点大小	Number	4
lineBorderColor	折线图颜色	String	'#95D150'
barWidth	柱状图的的宽度	Number	40
barColumnPaddingLeft	柱状图的 paddingLeft	Number	4
rowColumnHeight	表格每行的行高	Number	130

HBResourceLoad 方法

方法名称	说明	类型	版本

HBResourceLoad 事件

方法名称	说明	回调类型	版本
clickChartCell	单元格点击事件	（item） => {}	-
changePage	分页事件	({ page, pageSize }) => {}	-