lwt-vue-components v1.0.27
我的项目
安装
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>
注:组件中有使用到日期组件的,需要在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
2 months ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago