Avue-data數(shù)據(jù)大屏是一個基于Element-ui開發(fā)的組件庫拴泌，旨在滿足日常開發(fā)中的需求殉农。它提供了一些內(nèi)置的組件省骂，如菜單欄組件庫蟀淮，用戶可以自定義封裝組件，并配置數(shù)據(jù)源钞澳。支持的數(shù)據(jù)源類型包括sql數(shù)據(jù)源怠惶，需要新建數(shù)據(jù)源鏈接以指定連接的服務器及數(shù)據(jù)庫。Avue-data數(shù)據(jù)大屏已經(jīng)集成了echarts和axios庫轧粟，使得在開發(fā)過程中可以直接使用這些工具策治，無需重復引入脓魏。
在Avue-data數(shù)據(jù)大屏中，組件之間的交互聯(lián)動與數(shù)據(jù)傳遞是通過事件拋出和接收實現(xiàn)的通惫。例如茂翔，當A組件被點擊時，它會拋出一個點擊事件履腋，并附帶需要的參數(shù)傳遞給B組件珊燎。這種機制使得不同組件之間可以實現(xiàn)數(shù)據(jù)的動態(tài)更新和交互。
此外遵湖，Avue-data數(shù)據(jù)大屏支持通過接口方式和SQL查詢來獲取數(shù)據(jù)悔政，這對于展示柱狀圖等圖形非常有用。用戶需要了解柱狀圖的返回數(shù)據(jù)格式延旧，并能夠通過制作數(shù)據(jù)庫查詢接口來獲取數(shù)據(jù)谋国。這種靈活性使得Avue-data數(shù)據(jù)大屏能夠適應各種數(shù)據(jù)展示需求，無論是通過接口獲取數(shù)據(jù)還是直接進行SQL查詢迁沫。
總的來說芦瘾，Avue-data數(shù)據(jù)大屏是一個功能強大的數(shù)據(jù)可視化工具，它通過提供豐富的組件和靈活的數(shù)據(jù)處理方式弯洗，幫助用戶輕松地創(chuàng)建復雜的數(shù)據(jù)大屏應用
傳送門：
Avue-data數(shù)據(jù)大屏的介紹? ? ? ? ? ? ? ??
數(shù)據(jù)類型：Record數(shù)據(jù)集中的可選項，在數(shù)據(jù)管理里面配置牡整；
? ? ? ? ? ? ? ? ? Record多個組件共用一個數(shù)據(jù)集藐吮，每個組件請求一次；
? ? ? ? ? ? ? ? ? Publich也是數(shù)據(jù)集逃贝，他可以實現(xiàn)多個組件共用數(shù)據(jù)
? ? ? ? ? ? ? ? ? Public多個組件共用一個數(shù)據(jù)集谣辞，只請求一次
選擇一個數(shù)據(jù)集組件，配置數(shù)據(jù)源(接口)沐扳、編輯過濾器
使用：選擇剛才建立的Public數(shù)據(jù)集
獲取html中所需的數(shù)據(jù)，利用iquery轉化成對象
3沪摄、組件傳參交互
①新建兩個文本（父組件）躯嫉，新建一個子組件
②父組件在交互里，去配置杨拐，子類祈餐、參數(shù)名稱、映射字段等哄陶；
③點擊預覽帆阳，調試
④點擊父組件，接口id參數(shù)屋吨，是子組件收到父組件傳過來的參數(shù)
4蜒谤、自定義組件傳參交互1
5山宾、用Ref去做組件交互
①組件的序號
②事件里面獲取值，并修改
利用ref控制組件內(nèi)部的變量屬性
6鳍徽、自定義組件加載三方包
加載CDN資源资锰，加載前端 UI 框架layui
可以引入任意三方包，但是一定要放到mounted加載
點擊調用layer彈窗二維碼
7阶祭、多屏幕切換
主屏幕的組件是共享到每個屏幕上的台妆，比如一些常見共用的導航組件等；
切換不同屏幕的兩種方式：
1胖翰、利用大屏的交互方式去切換大屏
2、在組件的點擊事件切厘，利用JS代碼賦值ID切切換
8萨咳、主題色切換和變量使用
主題色修改
變量使用
如何和其他組件交互
調用$emit的click事件瓢喉，傳入對應的參數(shù)昵观，他就會調用內(nèi)部方法走大屏中的交互和事件
this.$emit("click",{formId:"test"})
可以用ref獲取對象和其他組件交互
10荒典、定時器組件使用
定時器組件就是定時執(zhí)行一段函數(shù)，他可以直接操作其他組件舀凛，改變其他組件樣式，賦值途蒋，顯隱操作等
?? var number=Math.random()*10;
?? //修改文本框內(nèi)容為隨機數(shù)
?? refs['36045926-a477-4270-888b-a740bf4f2497'].dataChart.value=number
?? //控制柱狀圖顯隱猛遍；直接操作$el對象下的style屬性即可
?? refs['f49295fb-5278-41ba-bcaca7091e66fbd1'].$el.style.display=number>5?"none":"black"
12、全局變量和全局過濾器
全局變量和全局過濾器的用法号坡，作用是：達到多個組件公用
①全局變量
新增一個api接口數(shù)據(jù)
新增變量
提示url中使用${xxx}懊烤，js語法中使用window.$glob["xxx"]
②全局過濾器
文本框需要value包裹一下
13、消息模板推送
新建一個消息推送組件
配置組件的推送渠道和模板
復制我們的調用方法宽堆，其實就是調用推送組件內(nèi)部send方法腌紧，并且傳入推送的內(nèi)容
refs['0c5e99ce-f252-406e-892c-bbcf2b726bf4'].send({message:"大屏推送測試"})
如何取其他組件值去推送
14、語音消息告警
右邊配置不用管畜隶，我們采用組件方式調用
調用組件的play方法壁肋，傳入對應的文本內(nèi)容
如果不傳入，則會以配置的文本為主
15籽慢、大屏導出獨立部署
單獨導出部署：https://www.yuque.com/smallwei/avue-data/hm3bughr09xit8bc
打包部署：https://www.yuque.com/smallwei/avue-data/xg8c1ptxsews6rhv
