Visual-platform，基於Vue的可視化大屏開發GUI框架

visual-platform

基於Vue的可視化大屏開發GUI框架 ------ CreatedBy ©漆黑小T

構建用於開發可視化大屏項目的自適應布局的GUI框架。

github倉庫: https://github.com/BugsMaster/visual-platform

開發環境

• 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

---

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: [e-mail]