> 我的项目

## 安装

```sh
npm install lwt-vue-components
```

## 组件1

* 折线图+剖面图 [demo](./src/views/chatDemo.vue)
## 属性

|参数|类型|说明|
|----|----|----|
chatConfig|Object|配置报图+剖面图参数|

参数使用说明如下：


chatConfig: { // 配置报图+剖面图参数

        width: 550, // 报图的宽
        height: 420, // 报图的高
        dateConfig: { // 配置日期参数
          start: '2018-02-03 12:12', // 默认开始时间
          end: '2019-01-12 09:34' // 默认结束时间
        },
        isRR: false, // true：水库，false：河道
        chatPath: 'WebApi/api/v1/water/d2/chart', // 报图请求的接口
        dataSourceParams: { // 请求报图接口的参数，数据源是dateConfig
          stcd: '90000121',
          time: '[@{start},@{end}]',
          dtmel_type: '3',
          interval: '1h'
        },
        chatDataKey: 'data.line_data', // 获取报图数据源数据
        lineDataKey: 'data', // 获取剖面图数据源数据
        endData: [ // 配置剖面图顶部的参数
          { key: '@{tm}', name: '时间', unit: '' },
          { key: '@{val}', name: '水位', unit: 'm' },
          { key: '@{val}', name: '库容', unit: '万m³' }
        ],
        lineParams: [ 
           // 配置剖面图画线的参数，
           // lineColor：线颜色，txtColor：文本颜色，text：文本值,
           // xStart:线x轴开始坐标，xEnd：线x轴结束坐标 txtX: 文本x轴坐标 
           // 注：水库的text的文本内容“坝顶高程”和“水位”，这两个与业务有关，text内容不可修改，其它可以
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '坝顶高程', xStart: 50, xEnd: 185, txtX: 80 }, // 坝顶高程
          { key: '@{flood_val}', lineColor: '#E62BB1', txtColor: '#E62BB1', text: '汛限水位', xStart: 0, xEnd: 185, txtX: 90 }, // 汛限水位
          { lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位', xStart: 0, xEnd: 185, txtX: 100 }, // 水位--水库
          // { key: '@{bdgc}', lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位', xStart: 150, xEnd: 270, txtX: 200 }, // 水位--河道
          { key: '@{ddz}', lineColor: '#112DE2', txtColor: '#112DE2', text: '死水位', xStart: 50, xEnd: 185, txtX: 100 }, // 死水位
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '设计水位', xStart: 186, xEnd: 280, txtX: 190 }, // 设计水位
          { key: '@{ddz}', lineColor: '#000000', txtColor: '#000000', text: '放水涵管', xStart: 186, xEnd: 280, txtX: 190 }, // 放水涵管
          { key: '@{ddz}', lineColor: '#C138B9', txtColor: '#C138B9', text: '警戒水位', xStart: 0, xEnd: 185, txtX: 90 }, // 警戒水位
          { key: '@{ddz}', lineColor: '#EB382A', txtColor: '#EB382A', text: '保证水位', xStart: 0, xEnd: 185, txtX: 90 } // 保证水位
        ],
        option: { // 报图参数
          grid: {
            show: true,
            borderColor: '#2077AD',
            backgroundColor: '#173458'
          },
          legend: {
            top: '1',
            left: '5',
            backgroundColor: '#133968',
            textStyle: {
              color: '#fff'
            }
          },
          yAxis: {
            name: '',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        },
        chatParams: { // 配置报图xy轴的参数
          xDataKey: '@{tm}', // x轴绑定的字段
          yDataKey: [ // y轴绑定的字段
            { key: '@{val}', name: '水位', type: 'line', source: 'data.line_data' }, // 水位， alone不传表示数据源是个数组，从数组取值
            { key: '@{ddz}', alone: true, name: '汛限水位', type: 'line', source: 'data' }, // 汛限水位， alone：true表示数据源是单个值，根据x轴长度转数组
            { key: '@{avg_val}', alone: true, name: '正常水位', type: 'line', source: 'data' } // 正常水位
          ]
        }
}
## 使用

```js
<template>
  <div>
    <chat chatConfig='chatConfig'/>
  </div>
</template>

<script>
import { chat } from 'lwt-vue-components'
export default {
  components: {
    chat
  }
}
</script>
// 除报图外的样式，采用外部覆盖css模式
<style lang="scss">
  .myproject{
    background: #3B517A;
  }
  .durTime .out{
    background: #224064;
  }
  .WdateInputDiv{
    background: #0C2544; color: #fff;padding: 0 2px;
  }
</style>

```
## 组件2

*  库容曲线 [demo](./src/views/curve.vue)
## 属性

|参数|类型|说明|
|----|----|----|
count|Object|配置水位-库容计算信息
chat|Object|配置库容曲线信息
othAttr|Object|其它配置信息

参数使用说明如下：

count: { // 配置水位-库容计算信息

    isShow: false, // 是否显示头部计算工具，true或不设置：是，false：否
    countPath: '/webapi/api/v1/water/d2/count-storagecurve', // 水位-库容计算的接口
    dataSourceParamsSW: { // 计算水位接口参数
        stcd: '90000122',
        w: '@{w}'
    },
    dataSourceParamsKR: { // 计算库容接口参数
        stcd: '90000122',
        rz: '@{rz}'
    },
    swDataKey: 'data.val',// 水位值
    krDataKey: 'data.w' // 库容值
}

chat: { // 配置库容曲线信息

    krvalPath: '/webapi/api/v1/water/d2/zvarl_b', // 库容曲线的接口
    dataSourceParams: { // 计算水位接口参数
        stcd: '90000122'
    },
    DataKey: 'data', // 接口请求的数据源数据
    xDataKey: '@{w}', // x轴绑定的字段
    yDataKey: '@{rz}' // y轴绑定的字段
}

othAttr: { // 其它配置信息

    width: 1000, // 报图的宽
    height: 432, // 报图的高
    dataSource: {
        sw: 40.5, // 当前水位
        kr: 192, // 当前库容
        tm: '11-02 23:32', // 当前时间
        flood_val: 45, // 汛限水位
        dsflz: 35, // 设计洪水位
        normz: 34, // 正常高水位
        ddz: 30 // 死水位
    },
    valParams: {
        sw: '@{sw}', // 当前水位
        swUnit: 'm', // 水位单位，不传默认m
        kr: '@{kr}', // 当前库容
        krUnit: 'km', // 库容单位，不传默认万m³
        tm: '@{tm}' // 当前时间
    },
    lineParams: [
          { name: '汛限水位', key: '@{flood_val}', lineColor: 'yellow' }, // 汛限水位
          { name: '设计洪水位', key: '@{dsflz}', lineColor: 'yellow' }, // 设计洪水位
          { name: '正常高水位', key: '@{normz}', lineColor: 'yellow' }, // 正常高水位
          { name: '死水位', key: '@{ddz}', lineColor: 'yellow' } // 死水位
    ],
    option: { // 报图参数
      grid: {
        show: true,
        borderColor: '#2077AD',
        backgroundColor: '#173458'
      },
      yAxis: {
        name: '水位(m)',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      xAxis: {
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      }
    }
}
## 使用

```js

<template>
  <div>
    <curve count='count' chat='chat' othAttr='othAttr' />
  </div>
</template>

<script>
import { curve } from 'lwt-vue-components'
export default {
  components: {
    curve
  }
}
</script>
// 除报图外的样式，采用外部覆盖css模式
<style lang="scss">
  .myproject{
    background: #3B517A;
  }
  .capacityCurve .out{
    background: #224064; color: #fff;
  }
  .capacityCurve .inp {
    border: 1px solid #44648E;background: #0C2544;color: #fff;
  }
  .capacityCurve input[disabled] {
    background: #59769a;
}
</style>
```
## 组件3
* 简单的表格（可下载文件）[demo](./src/views/tableDemo.vue)
## 属性
|参数|类型|说明|
|----|----|----|
head|Arrary|配置表格头部信息和绑定的字段
bodyData|Arrary|配置表格内容字段
config|Object|其它配置信息

参数使用说明如下：

|参数|类型|说明|
|----|----|----|
name|-|表头名称
type|index|序号自增长，从1开始|
||text/不传|文本字段|
||html|需要html解析的数据
key|-|数据源绑定的字段
val|-|绑定的字段需要格式化的数据（可不传）
headStyle|-|表头每列绑定的样式
bodyStyle|-|表格数据每列绑定的样式

  head: [ // 配置表格头部信息和绑定的字段

    { 
      'name': '序号', 'type': 'index', 'key': '', 'width': '25%', 'headStyle': {}, 'bodyStyle': {} 
    },
    { 
      'name': '文件类型', 'type': 'down', 'key': 'file', 'width': '25%', 'headStyle': {}, 'bodyStyle': {} 
    },
    { 
      'name': '时间', 'type': 'text', 'key': 'tm', 'val': '@{tm|date(YYYY-MM-DD)}', 'width': '25%', 'headStyle': {}, 'bodyStyle': {} 
    },
    {
      'name': '文件', 'type': 'html', 'key': 'src', 'width': '25%', 'headStyle': {}, 'bodyStyle': {} 
    }

]

  config: { // 其它配置信息

    width: '800px', // 表格宽度
    height: '500px' // 表格内容高度

  }

  bodyData: [ // 配置表格内容字段

    { 'type': 'xtxs', 'tm': '2015-12-02T12:12:02' },
    { 'type': 'xtxs', 'file': [{ 'name': 'xxxx', 'src': '' }, { 'name': 'xxxx', 'src': '' }], 'src': '<a href="../Script/CommonOP/../../../SysManage/FileDownload.aspx?AID=" target="_blank" title= ></a><br/>' },
    { 'type': 'xtxs', 'file': [{ 'name': 'xxxx', 'src': '' }, { 'name': 'xxxx', 'src': '' }] },
    { 'type': 'xtxs', 'file': [{ 'name': 'xxxx', 'src': '' }, { 'name': 'xxxx', 'src': '' }] },
    { 'type': 'xtxs', 'file': [{ 'name': 'xxxx', 'src': '' }, { 'name': 'xxxx', 'src': '' }] },
    { 'type': 'xtxs', 'file': [{ 'name': 'xxxx', 'src': '' }, { 'name': 'xxxx', 'src': '' }] },
    { 'type': 'xtxs', 'file': [{ 'name': 'xxxx', 'src': '' }, { 'name': 'xxxx', 'src': '' }] }

  ]
## 使用
## 组件4

* 日历[demo](./src/views/calendarDemo.vue)
## 属性
|参数|类型|说明|
|----|----|----|
initdate|String|配置默认日期
dateColor|Object|配置需要标记颜色的日期
getTime|Function|设置点击具体日期的回调
durMonDay|Function|设置点击加减年月日期的回调

参数使用说明如下：
 
initdate:  '2019-01-11', // 设置默认选中日期

dateColor: // 需标记的日期和颜色

{ 

     '2019-01-22': 'red', '2019-01-09': 'purple', '2019-01-31': 'green', '2019-01-29': 'pink' 

} 

getTime: function (data) { // 设置点击具体日期的回调

     console.log('da:' + data)

}

durMonDay: function (data) { // 设置点击加减年月日期的回调

     console.log('dur:' + data)

}

## 使用
```js
<calendar  initdate='initdate' dateColor='dateColor' getTime='getTime' durMonDay='durMonDay'/>

<script>
import { calendar } from 'lwt-vue-components'
export default {
  components: {
    calendar
  },
  methods: {
    getTime: function (data) { // 设置日期的回调
      // console.log('da:' + data)
    }
  },
  durMonDay: function (data) { // 设置点击加减年月日期的回调
    // console.log('dur:' + data)
  }
}
</script>
```
## 组件5

* 图片滑动轮播[demo](./src/views/picDemo.vue)

|参数|类型|说明|
|----|----|----|
config|Object|配置图片基本信息

参数使用说明：

config: {

      isRotation: false, // 是否自动播放轮播
      isShowIcom: false, // 是否显示左右图标
      speed: 1000, // 图片切换时间间隔
      data: [ // 图片数据源
        { src: './lwt-vue-components/default/assets/rotationPicture/noData.png' },
        { src: './lwt-vue-components/default/assets/rotationPicture/noData.png' }
      ],
      dico: 0 // 默认选中第几张图片，从0开始
}

## 使用
```js
 <pic config='config'/>

<script>
  import pic from '../../src/components/rotationPicture/rotationPicture'
  export default {
    name: 'Myproject',
    components: {
      pic
    },
    data () {
      return {
        config: {
          isRotation: false, // 是否自动播放轮播
          isShowIcom: false, // 是否显示左右图标
          speed: 1000, // 图片切换时间间隔
          data: [], // 图片数据源
          dico: 0 // 默认选中第几张图片，从0开始
        }
      }
    }
  }
</script>

```
 
* 表单[demo](./src/views/tabDemo.vue)
* 页签切换[demo](./src/views/pagePanelDemo.vue)



* 注：组件中有使用到日期组件的，需要在main.js文件中加入如下语句：
 
   import DatePicker from 'cll-vue-components/plugins/datePicker'

   Vue.use(DatePicker)




<script>
// import VueComponent from '@istrong/lwt-vue-components@0.1.0'

// export default {
//   components: {
//     VueComponent
//   }
// }
</script>
```

## 属性

参数 | 类型 | 可选值 | 默认值 | 说明
--- | --- | --- | --- | ---


## 事件

事件名称 | 说明 | 回调参数
--- | --- | ---


## 更新日志

- 0.1.44

-- 每个vue文件顶部注明该vue文件的功能名称以及简要描述其作业

-0.1.45

-- 修复“折线图+剖面图”组件，修复内容：解决数据未加载前，界面会显示其它图片

-1.0.1

-- 将组建发布到公网npm上

-1.0.2

-- 修改图片存放路径

-1.0.3

-- 库容曲线组件，新增isShow参数控制头部计算工具的显示隐藏

-1.0.9

--库容曲线组件，新增当前水位、库容单位的配置

-1.0.10

--日期格式改为my97样式

-1.0.11

--折线图警戒和保证水位为''时，折线图显示null

-1.0.12

--折线图警戒和保证水位为''时，剖面图不展示

-1.0.14

--库容曲线新增 typeTitle: '流量', // 标记文字,不传默认‘库容’

-1.0.15

--“折线图+剖面图”组件的库容数据随着折线数据变化

-1.0.17.1

--该版本是验证版本，请忽略，使用1.0.17版

-1.0.19

--“折线图+剖面图”组件的折线数据可以为负数

-1.0.20

--“折线图+剖面图”组件的yAxis配置;“日期组件”前加“时间”;修复“过程线”组件

-1.0.21

--'process'过程线组件的Y添加最大值和最小值

-1.0.23
-- 'chat.vue'文件,加了数值为null的判断

## Build Setup

```
# 安装依赖
npm install

# 本地运行
npm run serve

# 编译构建
npm run build
```