Avue-data數(shù)據(jù)大屏是一個(gè)基于Element-ui開發(fā)的組件庫，旨在滿足日常開發(fā)中的需求。它提供了一些內(nèi)置的組件，如菜單欄組件庫，用戶可以自定義封裝組件，并配置數(shù)據(jù)源。支持的數(shù)據(jù)源類型包括sql數(shù)據(jù)源，需要新建數(shù)據(jù)源鏈接以指定連接的服務(wù)器及數(shù)據(jù)庫。Avue-data數(shù)據(jù)大屏已經(jīng)集成了echarts和axios庫，使得在開發(fā)過程中可以直接使用這些工具，無需重復(fù)引入。
在Avue-data數(shù)據(jù)大屏中，組件之間的交互聯(lián)動(dòng)與數(shù)據(jù)傳遞是通過事件拋出和接收實(shí)現(xiàn)的。例如，當(dāng)A組件被點(diǎn)擊時(shí)，它會拋出一個(gè)點(diǎn)擊事件，并附帶需要的參數(shù)傳遞給B組件。這種機(jī)制使得不同組件之間可以實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)更新和交互。
此外，Avue-data數(shù)據(jù)大屏支持通過接口方式和SQL查詢來獲取數(shù)據(jù)，這對于展示柱狀圖等圖形非常有用。用戶需要了解柱狀圖的返回?cái)?shù)據(jù)格式，并能夠通過制作數(shù)據(jù)庫查詢接口來獲取數(shù)據(jù)。這種靈活性使得Avue-data數(shù)據(jù)大屏能夠適應(yīng)各種數(shù)據(jù)展示需求，無論是通過接口獲取數(shù)據(jù)還是直接進(jìn)行SQL查詢。
總的來說，Avue-data數(shù)據(jù)大屏是一個(gè)功能強(qiáng)大的數(shù)據(jù)可視化工具，它通過提供豐富的組件和靈活的數(shù)據(jù)處理方式，幫助用戶輕松地創(chuàng)建復(fù)雜的數(shù)據(jù)大屏應(yīng)用
傳送門：
Avue-data數(shù)據(jù)大屏的介紹? ? ? ? ? ? ? ??
數(shù)據(jù)類型：Record數(shù)據(jù)集中的可選項(xiàng)，在數(shù)據(jù)管理里面配置；
? ? ? ? ? ? ? ? ? Record多個(gè)組件共用一個(gè)數(shù)據(jù)集，每個(gè)組件請求一次；
? ? ? ? ? ? ? ? ? Publich也是數(shù)據(jù)集，他可以實(shí)現(xiàn)多個(gè)組件共用數(shù)據(jù)
? ? ? ? ? ? ? ? ? Public多個(gè)組件共用一個(gè)數(shù)據(jù)集，只請求一次
選擇一個(gè)數(shù)據(jù)集組件，配置數(shù)據(jù)源(接口)、編輯過濾器
使用：選擇剛才建立的Public數(shù)據(jù)集
獲取html中所需的數(shù)據(jù)，利用iquery轉(zhuǎn)化成對象
3、組件傳參交互
①新建兩個(gè)文本（父組件），新建一個(gè)子組件
②父組件在交互里，去配置，子類、參數(shù)名稱、映射字段等；
③點(diǎn)擊預(yù)覽，調(diào)試
④點(diǎn)擊父組件，接口id參數(shù)，是子組件收到父組件傳過來的參數(shù)
①組件的序號
②事件里面獲取值，并修改
利用ref控制組件內(nèi)部的變量屬性
加載CDN資源，加載前端 UI 框架layui
可以引入任意三方包，但是一定要放到mounted加載
點(diǎn)擊調(diào)用layer彈窗二維碼
7、多屏幕切換
主屏幕的組件是共享到每個(gè)屏幕上的，比如一些常見共用的導(dǎo)航組件等；
切換不同屏幕的兩種方式：
1、利用大屏的交互方式去切換大屏
2、在組件的點(diǎn)擊事件，利用JS代碼賦值ID切切換
主題色修改
變量使用
如何和其他組件交互
調(diào)用$emit的click事件，傳入對應(yīng)的參數(shù)，他就會調(diào)用內(nèi)部方法走大屏中的交互和事件
this.$emit("click",{formId:"test"})
可以用ref獲取對象和其他組件交互
10、定時(shí)器組件使用
定時(shí)器組件就是定時(shí)執(zhí)行一段函數(shù)，他可以直接操作其他組件，改變其他組件樣式，賦值，顯隱操作等
?? var number=Math.random()*10;
?? //修改文本框內(nèi)容為隨機(jī)數(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、全局變量和全局過濾器
全局變量和全局過濾器的用法，作用是：達(dá)到多個(gè)組件公用
①全局變量
新增一個(gè)api接口數(shù)據(jù)
新增變量
提示url中使用${xxx}，js語法中使用window.$glob["xxx"]
②全局過濾器
文本框需要value包裹一下
13、消息模板推送
新建一個(gè)消息推送組件
配置組件的推送渠道和模板
復(fù)制我們的調(diào)用方法，其實(shí)就是調(diào)用推送組件內(nèi)部send方法，并且傳入推送的內(nèi)容
refs['0c5e99ce-f252-406e-892c-bbcf2b726bf4'].send({message:"大屏推送測試"})
如何取其他組件值去推送
14、語音消息告警
右邊配置不用管，我們采用組件方式調(diào)用
調(diào)用組件的play方法，傳入對應(yīng)的文本內(nèi)容
如果不傳入，則會以配置的文本為主
單獨(dú)導(dǎo)出部署：https://www.yuque.com/smallwei/avue-data/hm3bughr09xit8bc
打包部署：https://www.yuque.com/smallwei/avue-data/xg8c1ptxsews6rhv
