visual-platform

基于Vue的可视化大屏开发GUI框架 ------ CreatedBy ©漆黑小T

构建用于开发可视化大屏项目的自适应布局的GUI框架。

安装

开发环境

• Node.js: ^8.9.1
• Vue: ^2.6.10
• element-ui: ^2.11.1
• DataV（默认不引入）："@jiaminghi/data-view": "^2.9.4"
• sass-loader：^7.1.0

安装

$ npm install visual-platform

Notice：单元边框样式基于 DataV 二次封装，默认不引入（type=0），如果设置type=1、2...，则该值与DataV边框样式的Index值映射。

DataV地址： http://datav.jiaminghi.com/guide/borderBox.html

---

Demo

todo

配置

Config属性

Option	Sub	Description	Type	Required	Default
bgcPath	--	背景图片地址	String	true	''
title	name	标题	String	false	'可视化平台'
	top	高度	Number	false	0
	size	文字大小	Number	false	16
	color	文字颜色	String	false	'#fff'
	timeShow	显示时间戳	Boolean	false	true
sectionArr	--	单元配置	Array	true	[]

sectionArr 单元配置

Option	Sub	Description	Type	Required	Default
id	--	slot唯一标识	String	true	0
width	--	宽度	Number	false	500
height	--	高度	Number	false	300
position	x / y	绝对定位	Number	false	{ x:0,y:0 }
title	name	标题	String	false	' '
	size	文字大小	Number	false	16
	color	文字颜色	String	false	'#fff'
	position	标题位置	Object	false	{x:20,y:20}
	isShow	显示/隐藏	Boolean	false	true
borderOptions	type	边框类型	Number	true	0 (无边框，默认不引入DataV)，index和DataV对应
	colorArr	边框颜色	Array	false	['red', 'green']
	bgColor	背景颜色	String	false	'blue'
	reverse	反向	Boolean	false	true
	dur	动画时长	Number	false	3
	title	边框标题	String	false	' '
	titleWidth	边框宽度	Number	false	250

控制台操作的回调函数：

 保存配置：@saveConfig 参数为修改后的Config

 清空配置：@clearConfig

默认配置：

visualConfig ={
    bgcPath:'/img/bg_index.jpg',//背景图在线地址 http://ids.nuctech.com/static/img/bg_index.9af20a2.jpg
    title:{
        name:'可视化平台',
        top:0,//主title高度
        size:16,//文字大小
        color:'#fff',//文字颜色
        timeShow:true//是否显示时间戳
    },
    sectionArr:[
        {
            id:'partOne',
            title:{name:'one',size:16,position:{x:20,y:20},color:'#fff',isShow:true},//单元名设置
            width:500,
            height:300,
            //边框，type=0，代表无边框(默认不引入DataV)，type的index值和DataV对应
            borderOptions:{
                type:0,
                colorArr:"[]",
                bgColor:'blue',
                reverse:false,
                dur:3,
                title:'',
                titleWidth:250
            },
            //单元位置
            position:{
                x:0,
                y:0
            },
        },
    ]
};

基本使用

• 组件中的书写：

<VisualTemplate :option="mainConfig" @clearConfig="clearConfig" @saveConfig="saveConfig">
    <!-- 依次写出需要展示的单元，单元数（sectionArr.length） -->
    <div class="box" :slot="index" v-for="(item,index) in mainConfig.sectionArr">
        <span>{{item}}</span>   
    </div> -->
    <div slot="1">
        <!-- 第一个单元 -->
    </div>
    <div slot="2">
        <!-- 第一个单元 -->
    </div>
    <div slot="3">
        <!-- 第三个单元 -->
        <!--<dv-decoration-3 style="width:250px;height:30px;" /> DataV装饰器-->
    </div>
</VisualTemplate>

• 引入插件：

import VisualTemplate, { visualConfig,visualSetOptions} from 'visual-platform'

• 自定义配置：

let	defConfig = {
    title:{
        timeShow:false  
    },
    sectionArr:[
        {
            id:'1',//对应的slot标识
            title:{name:'one',size:18,position:{x:20,y:20},color:'#fff',isShow:true},
            width:500,
            height:300,
            position:{
                x:0,
                y:0
            },
        },
        {
            borderOptions:{
                type:0
            },
            position:{
                x:500,
                y:0
            },
        },
        {
            title:{name:'eight',size:18,position:{x:20,y:20},color:'#fff',isShow:true},
            borderOptions:{
                type:0,//DataV border-11
                title:'打豆豆',
                titleWidth:200,
            },
            position:{
                x:0,
                y:220
            },
        },
    ]
}

• 调用 visualSetOptions方法，设置自定义参数

this.mainConfig = visualSetOptions(this.defConfig);

注：

• 初始化设置参数时在Created生命周期内
• visualConfig 可以导出完整的默认配置
• 按H键隐藏/显示操作台(默认隐藏)
• 按E键编辑模式切换

效果图

E-mail: lixingtan163@163.com