Visual-platform,基于Vue的可视化大屏开发GUI框架

visualplatform

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

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

github仓库: https://github.com/BugsMaster/visual-platform

开发环境

  • Node.js: ^8.9.1
  • Vue: ^2.6.10
  • 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


默认配置:

visualConfig ={
    bgcPath:'/img/bg_index.jpg',//背景图地址
    title:{
        name:"可视化平台",
        top:0,//主title高度
        size:16,//文字大小
        color:'#fff',//文字颜色
        timeShow:true//是否显示时间戳
    },
    sectionArr:[
        {
           	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:"[]",
             	backgroundColor:'blue',
             	reverse:false,
             	dur:3,
             	title:'',
             	titleWidth:250
           	},
			//单元位置
           	position:{
             	x:0,
             	y:0
           	},
        },
    ]
};

使用:

组件:
<VisualTemplate :option="mainConfig">
        <!-- 依次写出需要展示的单元,单元数(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;" />
        </div>
</VisualTemplate>

引入:
import VisualTemplate, { visualConfig,visualSetOptions} from 'visual-plantform'

自定义配置:
	let	defConfig = {
           	title:{
              timeShow:false  
            },
            sectionArr:[
                {
                    title:{name:'one',size:18,position:{x:20,y:20},color:'#fff',isShow:true},
                    width:500,
                    height:300,
                    borderOptions:{},
                    position:{
                        x:0,
                        y:0
                    },
                },
                {
                    borderOptions:{
                        type:1
                    },
                    position:{
                        x:500,
                        y:0
                    },
                },
                {
                    title:{name:'eight',size:18,position:{x:20,y:20},color:'#fff',isShow:true},
                    borderOptions:{
                        type:11,
                        title:'打豆豆',
                        titleWidth:200,
                    },
                    position:{
                        x:0,
                        y:220
                    },
                },
            ]
        }
调用 `visualSetOptions`方法,设置自定义参数
this.mainConfig = visualSetOptions(this.defConfig);

注:visualConfig 可以导出完整的默认配置

作者邮箱: lixingtan163@163.com

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

» Visual-platform,基于Vue的可视化大屏开发GUI框架

发表评论

免登录下载网,提供全网最优质的资源集合!