我的项目

安装

npm install lwt-vue-components

组件1

• 折线图+剖面图 demo

属性

|参数|类型|说明| |----|----|----| 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' } // 正常水位
      ]
    }

}

使用

<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

属性

|参数|类型|说明| |----|----|----| 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'
      }
    }
  }
}

}

使用

<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

属性

|参数|类型|说明| |----|----|----| 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

属性

|参数|类型|说明| |----|----|----| 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)

}

使用

<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

|参数|类型|说明| |----|----|----| 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开始

}

使用

 <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

• 页签切换demo

• 注：组件中有使用到日期组件的，需要在main.js文件中加入如下语句：

  import DatePicker from 'cll-vue-components/plugins/datePicker'

  Vue.use(DatePicker)

## 属性

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


## 事件

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


## 更新日志

- 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