# 1 组件内使用
```html
<yzzn-progress-round></yzzn-progress-round>
```

# 2.组件库介绍
| 类别             | 组件编号              | 组件名称                            |
| ---------------- | --------------------- | ----------------------------------- |
| 进度条组件       | yzzn-progress-normal  | 普通进度条                          |
|                  | yzzn-progress-round   | 圆环型进度条                        |
|                  | yzzn-progress-cell    | 环形间隔进度条                      |
|                  | yzzn-progress-ball    | 球状进度条                          |
| 表格组件         | yzzn-table            | 普通表格组件                        |
|                  | yzzn-table-render     | 自定义组件，支持input、button及图片 |
|                  | yzzn-table-paging     | 后台分页表格组件                    |
| 图表相关组件     | yzzn-chart-type       | 图表类型组件                        |
| 文件导出组件     | yzzn-export-excel     | 导出excel                           |
| 日期选择相关组件 | yzzn-date-type        | 选择时日月年类型                    |
|                  | yzzn-date-select      | 单个日期选择组件                    |
|                  | yzzn-date-multiSelect | 多个日期选择组件                    |
| 其他工具组件     | yzzn-tools-search     | 搜索选择框组件                      |
|                  | yzzn-tools-checks     | 多选弹窗组件                        |

# 3.组件库参数说明
## 3.1 progress组件库
进度条相关组件库

### 3.1.1 yzzn-progress-normal
普通进度条组件

范例

```html
<yzzn-progress-normal :data="ypnDataJson"></yzzn-progress-normal>
```
props
```javascript
{
    data:{
        id:"1", // id
        name: "test", // 名称
        percent: "50", // 百分比
        use: "50", // 当前值
        total: "100", // 总数
        nameWidth: "w30",  // 名称部分宽度class
        valueWidth: "w45", // 百分比进度条部分宽度class
        percentWidth: "w15" // 当前/总数部分class
    },
    index: 0, // 进度条颜色index
    colorArr: ['#17a6f8 '] // 进度条颜色组
}
```



### 3.1.2 yzzn-progress-round
环形连续进度组件

范例
```html
<yzzn-progress-round :progressOption="progressOption"></yzzn-progress-round>
```

props
```javascript
{
	progressOption:{
        id: "testRound",
        max: 100, // 最大值
        value: 80, // 当前值
        radius: 30, // 圆环半径
        innerStrokeWidth: 5, // 内圆环描边宽度
        outStrokeWidth:8, // 外圆环描边宽度
        color1: "#4352f3", // 渐变起始颜色
        color2: "#0587FE", // 渐变结束颜色
        transform: "scale(0.8)", // 整体缩放
        fontSize: "1em", // 文字大小
        type: "value",  // 可选：use 显示当前值及最大值（80/100） percent 显示百分比 value 显示数据值
    }
}
```


### 3.1.3 yzzn-progress-cell
环形间隔进度组件

范例
```html
<yzzn-progress-cell :progressPercent="ypcDataJson.progressPercent"></yzzn-progress-cell>
```

props
```javascript
{
	progressPercent:80  // 百分比
}
```

### 3.1.4 yzzn-progress-ball
球状进度条组件

范例
```html
<yzzn-progress-ball :percentsLeft="ypbDataJson.percentsLeft" :colorObj="ypbDataJson.colorObj"></yzzn-progress-ball>
```

props
```javascript
{
    percentsLeft: 50, // 百分比
    colorObj:{
        waveFrontColor: '#02D7DD', // 水波前置颜色
        waveBackColor: '#0AA4B0', // 水波背景颜色颜色
        stageBg: '#1D2A48', // 进度球背景颜色
        fontColor: { color : "#F8F8F8", "font-size": "0.8em" }, // 文字样式
        showValue: false, // 是否显示数据值，true则显示value，false则显示percentsLeft
        value: "12.5kWh"  // 数据值
    }
}
```
## 3.2 table组件库
表格相关组件库

范例
```html
<yzzn-table :tableId="yTableData.tableId"
                    :pageNum = "yTableData.pageNum"
                    :systemClass="yTableData.systemClass"
                    :isPagination="yTableData.isPagination"
                    :isShowOrderBox="yTableData.isShowOrderBox"
                    :tableData="yTableData.tableData"
                    :igKeyList="yTableData.igKeyList"></yzzn-table>
```


### 3.2.1 yzzn-table
普通表格组件

props
```javascript
{
    tableId: "yTable", // 表格id
    tableData:{  // 表格数据
        columns: [
            {title:"名称", key:"name"},
            {title:"用电/kWh", key:"value"},
            {title:"用水/m³", key:"sum"}
        ],
        dataArr:[
            { name: "rwe", value:4856.5, sum: 58.9 },
            { name: "qwe", value: 1125.5, sum: 789.5 }
        ]
    },
    igKeyList: ['name'],  // 不可排序列（name名称列为中文，无法排序，故需要忽略）
    systemClass: "energy",  // 表格主题class
    isPagination: true,  // 是否分页
    pageNum: 10, // 分页行数
    isShowOrderBox: true,  // 是否显示排序模块
}
```
### 3.2.2 yzzn-table-render
自定义组件，支持input、button、radio、checkbox、图片等

范例
```html
<yzzn-table-render :tableId="ytrTableData.tableId"
                        :isPagination="ytrTableData.isPagination"
                        :systemClass = "ytrTableData.systemClass"
                        :pageNum = "ytrTableData.pageNum"
                        :isNewNode = "ytrTableData.isNewNode"
                        :tableData="ytrTableData.tableData"
                        @childFn="tableFn"></yzzn-table-render>
```

props
```javascript
{
    tableId: "ytrTable", // 表格id
    isPagination: true, // 是否分页
    pageNum: 15, // 分页行数
    systemClass: "energy",  // 表格主题class
    isNewNode: true,  // 是否是新表格，false时修改表格数据不会触发表格重绘
    tableData:{   // 表格数据 type支持normal、checkbox、radio、input、numInput、button和i元素等选项
        columns:[
            { id: 1, key: "name", title: "年份", orderBy: 1,type:"normal"},
            { id: 2, key: "unit", title: "指标名称", orderBy: 2,type:"normal"},
            { id: 3, key: "data8", title: "多选", orderBy: 10,type:"checkbox"},
            { id: 4, key: "data9", title: "单选", orderBy: 11,type:"radio"},
            { id: 5, key: "data10", title: "名称", orderBy: 12,type:"input"},
            { id: 6, key: "data11", title: "能耗", orderBy: 13,type:"numInput"},
            { id: 7, key: "data12", title: "总计", orderBy: 14,type:"normal"},
            { id: 8, key: "operation", title: "操作", orderBy: 15,type:"button"},
        ],
        dataArr: [
            {
                name: "2021",
                unit: "kWh",
                data8: true,
                data9: true,
                data10: "text",
                data11: "123.5",
                data12: "424",
                operation: {
                    buttons:[
                        { name:"填报", type:"add", bClass: "normalButton"},
                        { name:"分析", type:"analysis", bClass: "normalButton"},
                        { name:"报警记录", type:"alarmInfo", bClass: "normalButton"}
                    ]
                }
            }
        ]
    }
}
```

事件
```javascript
tableFn:function (rowData) {
	console.log(rowData.op) // 按钮type
	console.log(rowData.data) // 当前行数据
}
```
### 3.2.3 yzzn-table-paging
后台分页表格组件

props
```javascript
```

### 3.2.4 yzzn-table-scroll

#### 样例1：全部功能展示

##### template
```javascript
<yzzn-table-scroll
  :tableId="ytsTableData.tableId"
  :tableData="ytsTableData.tableData"
  :systemClass="ytsTableData.systemClass"
  :autoWidth="ytsTableData.autoWidth"
  :isPagination="ytsTableData.isPagination"
  :pageSize="ytsTableData.pageSize"
  :paginationType="ytsTableData.paginationType"
  :totalSize="ytsTableData.totalSize"
  :showPageSize="ytsTableData.showPageSize"
  :pageSizeOption="ytsTableData.pageSizeOption"
  :columnOrder="ytsTableData.columnOrder"
  :showOrder="ytsTableData.showOrder"
  :orderKeys="ytsTableData.orderKeys"
  @childFn="tableScrollFn"
  @handlePageChange="handlePageChange"
  @handlePageSizeChange="handlePageSizeChange"
>
  <template #header="{column}">{{ column.title }} </template>
  <template #name="{row, column, index}">{{ row[ckey] }} </template>
</yzzn-table-scroll>
```

##### 参数
```json
ytsTableData: {
  tableId: 'ytsTable',
  tableData: {
    columns: [
      { id: 1, key: 'name', title: '年份', orderBy: 1, type: 'normal' },
      { id: 2, key: 'unit', title: '指标名称', orderBy: 2, type: 'normal' },
      { id: 3, key: 'data8', title: '多选', orderBy: 10, type: 'checkbox' },
      { id: 4, key: 'data9', title: '单选', orderBy: 11, type: 'radio' },
      { id: 5, key: 'data10', title: '名称', orderBy: 12, type: 'input' },
      { id: 6, key: 'data11', title: '能耗', orderBy: 13, type: 'numInput' },
      { id: 7, key: 'data12', title: '总计', orderBy: 14, type: 'span' },
      { id: 8, key: 'operation', title: '操作', orderBy: 15, type: 'button' },
    ],
    dataArr: [
      {
        name: '2021',
        unit: 'kWh',
        data8: true,
        data9: false,
        data10: 'text',
        data11: '123.5',
        data12: { text: '424',class: 'aaa' },
        operation: {
          buttons: [
            { name: '填报', type: 'add', bClass: 'normalButton' },
            { name: '分析', type: 'analysis', bClass: 'normalButton' },
            { name: '报警记录', type: 'alarmInfo', bClass: 'normalButton' },
          ],
        },
      },
      {
        name: '2020',
        unit: 'kWh',
        data8: true,
        data9: true,
        data10: 'text',
        data11: '123.5',
        data12: { text: '424' },
        operation: {
          buttons: [
            { name: '填报', type: 'add', bClass: 'normalButton' },
            { name: '分析', type: 'analysis', bClass: 'normalButton' },
            { name: '报警记录', type: 'alarmInfo', bClass: 'normalButton' },
          ],
        },
      },
  
  },
  systemClass: 'energy',
  autoWidth: true,
  isPagination: true,
  paginationType: 'localize',
  pageSize: 5,
  showPageSize: true,
  pageSizeOption: [5, 10, 15, 20],
  columnOrder: true,
  showOrder: true,
  orderKeys: ['name', 'data11', 'data12'],
},

```


#### 样例2：普通表格+分页+排序

##### template
```javascript
<yzzn-table-scroll
  :tableId="ytsTableData.tableId"
  :tableData="ytsTableData.tableData"
  :systemClass="ytsTableData.systemClass"
  :autoWidth="ytsTableData.autoWidth"
  :isPagination="ytsTableData.isPagination"
  :pageSize="ytsTableData.pageSize"
  :showOrder="ytsTableData.showOrder"
  :orderKeys="ytsTableData.orderKeys"
  @childFn="tableScrollFn"
  @handlePageChange="handlePageChange"
  @handlePageSizeChange="handlePageSizeChange"
>
</yzzn-table-scroll>
```

##### 参数
```json
ytsTableData: {
  tableId: 'yTable',
  tableData: {
    columns: [
      { title: '名称', key: 'name' },
      { title: '用电/kWh', key: 'value' },
      { title: '用水/m³', key: 'sum' },
    ],
    dataArr: [
      {
        name: 'rwe',
        value: 4856.5,
        sum: 58.9,
      },
      {
        name: 'qwe',
        value: 1125.5,
        sum: 789.5,
      },
    ],
  },
  systemClass: 'energy',
  isPagination: true,
  pageSize: 10,
  showOrder: true,
  orderKeys: ['sum', 'value'],
},
```

#### 参数说明
| 参数                  | 说明                                                         | 类型    | 默认值           |
| --------------------- | ------------------------------------------------------------ | ------- | ---------------- |
| tableId               | 表格Id，唯一值                                               | String  | 'myTable'        |
| tableData             | 表格数据，包含columns(表头)和dataArr(数据)                   | Object  |                  |
| systemClass           | 表格主题，表格类名                                           | String  | 'energy'         |
| autoWidth             | 自动宽度，根据数据自动调整宽度，但较消耗性能，数据量大请勿用 | Boolean | false            |
| isPagination          | 是否分页                                                     | Boolean | false            |
| pageSize              | 单页数量，分页可用                                           | Number  | 15               |
| paginationType        | 分页类型，分页可用<br>localize(本地分页), online(后端分页)   | String  | 'localize'       |
| totalSize             | 数据总数，后端分页可用                                       | Number  | 0                |
| showPageSize          | 显示单页数量选择框，分页可用                                 | Boolean | false            |
| pageSizeOption        | 单页数量选择项                                               | Array   | [15, 25, 35, 45] |
| columnOrder           | columns(表头)是否排序，需要有orderBy字段                     | Boolean | false            |
| showOrder             | 显示选择排序的选择框                                         | Boolean | false            |
| orderKeys             | 选择排序的key数组                                            | Array   | []               |
| @childFn              | 子组件方法，表格部分事件可用                                 |
| @handlePageChange     | 子组件方法，当前页改变事件                                   |
| @handlePageSizeChange | 子组件方法，当前页数量改变事件                               |


## 3.3 图表相关组件

### 3.3.1 yzzn-chart-type
图表类型组件

范例
```html
<yzzn-chart-type :cType="yctDataObj.cType" @childFunc="changeChartType"></yzzn-chart-type>
```

props
```javascript
{
    cType: "bar", // 图表类型 bar/line/table
    showList: [1,1,0] // 是否显示对应按钮 bar/line/table
}
```

事件
```javascript
changeChartType:function (cType) {
	this.yctDataObj.cType = cType // 设置图表类型
},
```

## 3.4 文件导出组件

### 3.4.1 yzzn-export-excel
导出excel组件

范例
```html
<yzzn-export-excel :fileName="yeeDataObj.fileName" :fileData="yeeDataObj.fileData"></yzzn-export-excel>
```

props
```javascript
{
    fileName: "表格", // 导出文件名称
    fileData:{ // 表格数据，同普通表格数据中的tableData
        columns: [
            {title:"名称", key:"name"},
            {title:"用电/kWh", key:"value"},
            {title:"用水/m³", key:"sum"}·
        ],
        dataArr:[
            { name: "rwe", value:4856.5, sum: 58.9 },
            { name: "qwe", value: 1125.5, sum: 789.5, }
        ]
    }
}
```

## 3.5 日期选择相关组件

### 3.5.1 yzzn-date-type
选择时日月年类型组件

范例
```html
<yzzn-date-type :type="dateType" @childFunc="setDateType"></yzzn-date-type>
```

props
```javascript
{
    type:"hour", // 选择日期类型
    showType:[1,1,1,1] // 是否显示时/日/月/年按钮
}
```

事件
```javascript
setDateType:function (cType) {
	this.dateType = cType
},
```

### 3.5.2 yzzn-date-select
单个日期选择组件

范例
```html
<yzzn-date-select :type="dateType" @childFunc="selectSingleDate"></yzzn-date-select>
```

props
```javascript
{
    type:"hour", // 选择日期类型
    id: "t1" // id
    scrollDiv: "#content", // 组件所在父级div(页面存在滚动情况下必须配置)
    defaultDate:{  // 初始日期，不可显示
    	hour: "2021-08-18",
        day: "2021-08",
        month: "2021",
    }
}
```


事件
```javascript
selectSingleDate:function(dateObj){
	this.singleDateObj = dateObj
	console.log(dateObj.type) // 当前日期类型
	console.log(dateObj.time) // 当前所选时间
},
```

### 3.5.3 yzzn-date-multiSelect
多个日期选择组件

范例
```html
<yzzn-date-multiSelect :type="dateType" @childFunc="selectMultiDate"></yzzn-date-multiSelect>
```

props
```javascript
{
    type:"hour", // 选择日期类型
    scrollDiv: "#content", // 组件所在父级div(页面存在滚动情况下必须配置)
}
```

事件
```javascript
selectMultiDate:function(dateArr){
	this.multiDateArr = dateArr
	console.log(dateArr)
}
```

console
```javascript
{
    showDate:{ // 当前显示时间选择框状态 
        date1:1,
        date2:1,
        date3:1
    },
    time:{ // 当前所选时间 date1,date2,date3
        date1:"2021-08-18",
        date2:"2021-08-17",,
        date3:"2021-08-18"
    },
    type:"hour"  // 当前日期类型
}
```

## 3.6 其他工具组件

### 3.6.1 yzzn-tools-search
搜索选择框组件

范例
```html
<yzzn-tools-search :operation="ytsDataObj.operation" @childFunc="getSearchStr"></yzzn-tools-search>
```

props
```javascript
{
	operation: "快速查询" // 按钮名称
}
```

事件
```javascript
getSearchStr:function (str) {
	this.searchStr = str // 搜索框输入内容
}
```

### 3.6.2 yzzn-tools-checks
多选弹窗组件

范例
```html
<yzzn-tools-checks
    :scrollDiv="ytcDataJson.scrollDiv"
    :checkList="ytcDataJson.checkList"
    @childFunc="getCheckState"></yzzn-tools-checks>
```


props
```javascript
{
    scrollDiv: ".content2", // 弹窗所在父级div
    checkList: [  // 多选列表
        { id: 1, isCheck: true, name: "桂南地区党政机关" },
        { id: 2, isCheck: false, name: "桂北地区公共机构" },
    ]
}
```

事件
```javascript
getCheckState:function (checkList) {
	this.ytcDataJson.checkList = checkList  // 修改后的多选列表
},
```
