長(zhǎng)春市城市智能體數(shù)據(jù)指標(biāo)卡片使用規(guī)范范圍本標(biāo)準(zhǔn)規(guī)范規(guī)定了指標(biāo)卡片庫(kù)的卡片設(shè)計(jì)、管理、使用等方面的標(biāo)準(zhǔn)要求，設(shè)計(jì)方法，使用/調(diào)用方法。本標(biāo)準(zhǔn)規(guī)范適用于長(zhǎng)春市城市智能體指標(biāo)卡片體系平臺(tái)及平臺(tái)使用單位和使用人員，利用大數(shù)據(jù)可視化平臺(tái)借助指標(biāo)卡片體系快速開(kāi)發(fā)數(shù)字看板、領(lǐng)導(dǎo)者駕駛艙等場(chǎng)景應(yīng)用，規(guī)范了卡片的設(shè)計(jì)、使用、歸屬、管理等方面的內(nèi)容，進(jìn)一步提高數(shù)據(jù)指標(biāo)共享共用的能力。規(guī)范性引用文件下列文件對(duì)于本文件的應(yīng)用是必不可少的。凡是注日期的引用文件，僅所注日期的版本適用于本文件。凡是不注日期的引用文件，其最新版本（包括所有的修改單）適用于本文件。GB/T35295信息技術(shù)大數(shù)據(jù)術(shù)語(yǔ)GB/T5271.4-2000信息技術(shù)詞匯第4部分：GB/T5271.4-2000信息技術(shù)詞匯第4部分：數(shù)據(jù)的組織GB/T7027-2002標(biāo)準(zhǔn)化工作導(dǎo)則信息分類的基本原則和方法術(shù)語(yǔ)定義GB/T35295和GB/T7027-2002界定的以及下列術(shù)語(yǔ)和定義適用于本文件?？ㄆ笜?biāo)卡片，根據(jù)智能體可視化卡片平臺(tái)設(shè)計(jì)的，將數(shù)據(jù)指標(biāo)內(nèi)容封裝成固定的小區(qū)塊—場(chǎng)景或者指標(biāo)卡片，在可視化設(shè)計(jì)時(shí)，可以直接調(diào)取使用場(chǎng)景或者指標(biāo)卡片，進(jìn)行大數(shù)據(jù)可視化頁(yè)面的快速構(gòu)建?？ㄆ亲詭邮?、數(shù)據(jù)及權(quán)限，可實(shí)現(xiàn)交互的組件。看板編輯器是城市智能體可視化指標(biāo)卡片設(shè)計(jì)器，用于設(shè)計(jì)可視化指標(biāo)卡片的編輯器?？梢栽O(shè)計(jì)包括卡片的樣式、事件以及交互，設(shè)計(jì)完成后，利用編輯器將卡片封包，為外部調(diào)用使用。指標(biāo)卡片設(shè)計(jì)規(guī)范1.在看板編輯器中可以將卡片拼裝成一個(gè)看板。2.看板編輯器支持通過(guò)卡片編輯器中編輯好的卡片在看板編輯器中進(jìn)行組裝拼接成看板。3.看板編輯器還支持第三方業(yè)務(wù)系統(tǒng)將獨(dú)立的業(yè)務(wù)單元按照卡片標(biāo)準(zhǔn)進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換后的業(yè)務(wù)單元也與卡片編輯器中配置的卡片一樣可在看板編輯器當(dāng)中進(jìn)行組裝拼接成看板。卡片標(biāo)準(zhǔn)結(jié)構(gòu)卡片文件結(jié)構(gòu)體系：basic.ts為卡片抽象的基礎(chǔ)及樣式配置項(xiàng)，卡片可以把基礎(chǔ)屬性寬高，邊框等屬性抽象為配置項(xiàng)；events.ts:為卡片抽象出來(lái)的事件動(dòng)作、事件配置類型的配置文件，系統(tǒng)通過(guò)讀取配置文件給卡片生成配置項(xiàng)model.ts:為卡片抽象出來(lái)的數(shù)據(jù)模型配置項(xiàng)，通過(guò)該配置項(xiàng)，系統(tǒng)能讀取到該卡片的綁定列、渲染告警等信息卡片文件代碼結(jié)構(gòu)體系：public：為放置卡片使用的外部js插件、圖片公共資源等卡片主要屬性及API卡片屬性屬性名稱類型描述示例idString卡片id'bar_xxx'typeString卡片類型'bar'versionString卡片版本'1.0.0'configany卡片配置{}$elementJQuery卡片DOM元素$('<div></div>')$parentJQuery外部框架創(chuàng)建的卡片根節(jié)點(diǎn)childrenArray<Component>子卡片[]卡片API函數(shù)名稱參數(shù)描述constructor()構(gòu)造卡片實(shí)例、生成配置init()卡片開(kāi)始初始化destroy()卡片銷毀getConfig()獲取配置updateConfig(key,value)key:stringvalue:string更新配置render()渲染卡片buildDefaultConfig()構(gòu)造卡片的默認(rèn)配置resize()width:numberheight:number修改大小reposition()x:numbery:number調(diào)整位置getConfigSnapshot()獲取配置的快照getParent()獲取$parentregistEvent()注冊(cè)事件dispatchEvent()eventType:stringevent:anydispatch事件給EventManagerreceiveEvent()接收來(lái)自EventManager的事件getModelConfig()獲取卡片實(shí)例上的模型配置updateModelConfig(key,value)更新卡片模型數(shù)據(jù)，支持全局修改和局部按照命名空間修改值主要API說(shuō)明：1）init:卡片正式渲染前的對(duì)象實(shí)例化或配置數(shù)據(jù)處理；2）render:卡片正式渲染，卡片需要渲染的內(nèi)容都在render內(nèi)部完成；如果只是業(yè)務(wù)模塊，不涉及到其它配置項(xiàng)，通過(guò)render方法即可完成外部業(yè)務(wù)模塊的卡片封裝3）destroy:卡片銷毀4）getConfig:獲取卡片配置信息，5）updateConfig:通過(guò)key/value形式更新卡片配置信息卡片事件及勾子系統(tǒng)及API1）為了滿足頁(yè)面和卡片之間的相互交付，卡片系統(tǒng)提供了勾子系統(tǒng)和事件系統(tǒng)；通過(guò)注冊(cè)業(yè)務(wù)勾子函數(shù)來(lái)滿足業(yè)務(wù)定制需求。2）勾子系通過(guò)卡片component開(kāi)放勾子回調(diào)的注冊(cè)函數(shù)如下表所示：函數(shù)名稱參數(shù)描述addHook()hookKey:stringfn:Function添加鉤子函數(shù)addHooks()hookKey:stringfns:Array<Function>添加多個(gè)鉤子函數(shù)execHook()hookKey:string執(zhí)行鉤子函數(shù)execHooks()hookKey:string執(zhí)行多個(gè)鉤子函數(shù)addOnceHook()addOnceHooks()3）事件系通過(guò)卡片component開(kāi)放響應(yīng)回調(diào)的注冊(cè)函數(shù)如下表所示：函數(shù)名稱參數(shù)描述registEventHandler()eventType:stringfn:Function給事件類型，注冊(cè)響應(yīng)函數(shù)removeEventHandlereventType:stringregistOnceEventHandlereventType:stringfn:Function給事件類型，注冊(cè)響應(yīng)函數(shù)，注冊(cè)只執(zhí)行一次3）頁(yè)面上用戶交互行為包含包括下面兩個(gè)方向的的交互:卡片內(nèi)部和頁(yè)面交互卡片SDK接入頁(yè)面后，給初始化函數(shù)SF_UE.initSlice返回的卡片實(shí)例，通過(guò)事件系統(tǒng)給卡片注冊(cè)事件響應(yīng)函數(shù)，當(dāng)卡片內(nèi)卡片具體操作時(shí)，響應(yīng)函數(shù)執(zhí)行，來(lái)完成和頁(yè)面交互的效果,如下圖的10、11、12步驟頁(yè)面和卡片內(nèi)部交互卡片SDK接入頁(yè)面后，給初始化函數(shù)SF_UE.initSlice返回的卡片實(shí)例，通過(guò)勾子系統(tǒng)添加具體業(yè)務(wù)邏輯勾子函數(shù)，操作過(guò)程中可以通過(guò)卡片execHook執(zhí)行注冊(cè)勾子，達(dá)到和卡片的交互效果。如下圖的7、8、9步驟指標(biāo)卡片接入規(guī)范指標(biāo)卡片的接口內(nèi)容卡片信息文件包括創(chuàng)建卡片過(guò)程中對(duì)卡片的大小、背景設(shè)置等設(shè)置，也包括卡片內(nèi)部關(guān)于組件嵌套、樣式、事件、數(shù)據(jù)的設(shè)置等信息。主要分為：卡片基礎(chǔ)信息：卡片名稱、ID等管理信息卡片組件信息：組件配置、樣式、事件及聯(lián)動(dòng)以及數(shù)據(jù)相關(guān)配置。卡片運(yùn)行前端所需包包含基礎(chǔ)包和組件包，其中基礎(chǔ)包相對(duì)每個(gè)版本是固定的，隨著版本升級(jí)而升級(jí)，頁(yè)面使用多個(gè)卡片時(shí)，基礎(chǔ)包只在首次加載；組件包根據(jù)卡片信息解析生成需要加載的組件資源，已在其它卡片加載的組件，不會(huì)重復(fù)加載。主要分為兩部分：基礎(chǔ)包：包括web端組件渲染引擎、web端事件解析引擎、數(shù)據(jù)獲取解析、數(shù)據(jù)web端渲染引擎。組件包：主要包括組件集相關(guān)web端資源?？ㄆ慕尤胍?guī)范卡片的接入卡片接入使用說(shuō)明第三方頁(yè)面通過(guò)卡片SDK調(diào)用方式嵌入卡片效果，需要通過(guò)以下兩個(gè)步驟來(lái)實(shí)現(xiàn)卡片內(nèi)容呈現(xiàn)在目標(biāo)頁(yè)面上：步驟1、在目標(biāo)頁(yè)面上通過(guò)script方式嵌入卡片腳本（sfue_slice_service_sdk_v0.0.1.js），詳細(xì)引用地址以實(shí)際部署地址為主；腳本包含：解析引擎基礎(chǔ)模塊、統(tǒng)一發(fā)起卡片資源請(qǐng)求業(yè)務(wù)功能、卡片初始化、渲染管理及和外部頁(yè)面之間的部分事件交互。步驟2、調(diào)用卡片初始化函數(shù)SF_UE.initSlice(sliceID,options)，在目標(biāo)頁(yè)面實(shí)現(xiàn)卡片渲染；該方法負(fù)責(zé)：通過(guò)卡片ID向卡片服務(wù)發(fā)起卡片配置文件請(qǐng)求，通過(guò)解析卡片配置，發(fā)起內(nèi)部組件資源地址構(gòu)建—>請(qǐng)求—>解析組件—>渲染的過(guò)程管道管理?？ㄆ跏蓟鞒蹋嚎ㄆ跏蓟鞒倘缦聢D：卡片初始化：SF_UE.initSlice說(shuō)明API名稱參數(shù)描述返回值SF_UE.initSlicesliceID:必填參數(shù)卡片IDoptions:非必須參數(shù)卡片初始化時(shí)回調(diào)函數(shù)配置{//卡片渲染開(kāi)始勾子函數(shù)beforeSliceRender:function(){},//卡片配置信息加載完勾子函數(shù)afterSliceCfgLoaded:function(){},//卡片件靜態(tài)包加載前勾子函數(shù)beforeStaticSourceloaded:function(){},//卡片渲染完成勾子函數(shù)afterSliceRender:function(){},}卡片初始化入口,option勾子函數(shù)配置為卡片在渲染的各個(gè)階段分別開(kāi)放的勾子入口，第三方頁(yè)面初始化卡片時(shí)，可以根據(jù)實(shí)際場(chǎng)景使用。如：卡片初始化可以加入頁(yè)面定制loading效果；卡片結(jié)束后可以消除loadingcomponent<Array>卡片內(nèi)部組件實(shí)例對(duì)象數(shù)組；組件對(duì)象的屬性和API參考‘章節(jié)3’卡片的解析運(yùn)行1.卡片解析是在卡片接入初始化、卡片配置數(shù)據(jù)和組件資源響應(yīng)完成的一個(gè)解析過(guò)程；通過(guò)卡片特定的解析引擎完成對(duì)組件資源加載、組件構(gòu)建、數(shù)據(jù)模型配置、數(shù)據(jù)權(quán)限配置、事件交互邏輯配置、預(yù)警通知配置，最后呈現(xiàn)在目標(biāo)頁(yè)面上。2.按照解析過(guò)程可以分為以下兩個(gè)階段：第一階段：組件資源信息解析—根據(jù)解析結(jié)果，動(dòng)態(tài)決定加載對(duì)應(yīng)的組件靜態(tài)資源第二階段：組件配置解析—通過(guò)對(duì)組件構(gòu)建和配置解析完成對(duì)組件的渲染3.卡片在解析過(guò)程中會(huì)執(zhí)行卡片每個(gè)階段的勾子函數(shù)，調(diào)用卡片初始化SF_UE.initSlice函數(shù)時(shí)，可以按照卡片勾子函數(shù)函數(shù)標(biāo)準(zhǔn)作為參數(shù)統(tǒng)一傳入。詳細(xì)解析過(guò)程如下圖：卡片與頁(yè)面交互1.卡片與頁(yè)面交互可以分為卡片初始化過(guò)程的交互和用戶操作的交互；2.卡片初始化過(guò)程的交互按照卡片提供的hooks函數(shù)來(lái)完成；3.用戶操作交互按照組件API和組件事件機(jī)制完成長(zhǎng)春城市智能體指標(biāo)卡片化使用規(guī)范編制說(shuō)明一、基本背景2021年《長(zhǎng)春市政府工作報(bào)告》中提出建設(shè)完善“城市智能體”，結(jié)合“數(shù)字吉林”建設(shè)，深化政務(wù)數(shù)據(jù)資源共享開(kāi)發(fā)利用水平，推動(dòng)城市治理的科學(xué)化、精細(xì)化、智能化。為此，制訂政務(wù)數(shù)據(jù)資源共享指標(biāo)的卡片化應(yīng)用體系規(guī)范，將成為降低跨部門數(shù)據(jù)資源共享使用門檻、提高各部門快速搭建數(shù)據(jù)看板、管理者駕駛艙等應(yīng)用場(chǎng)景效率的必然要求。在此背景下，為支撐長(zhǎng)春市城市智能體指標(biāo)卡片化管理可視化平臺(tái)建設(shè)，加快實(shí)現(xiàn)跨部門數(shù)據(jù)指標(biāo)共享的規(guī)范化，市大數(shù)據(jù)局提出制訂《長(zhǎng)春城市智能體指標(biāo)卡片化體系標(biāo)準(zhǔn)規(guī)范》，包括卡片的設(shè)計(jì)標(biāo)準(zhǔn)規(guī)范、卡片的管理標(biāo)準(zhǔn)規(guī)范、卡片的使用標(biāo)準(zhǔn)規(guī)范3類。二、標(biāo)準(zhǔn)編制原則標(biāo)準(zhǔn)編制將遵循以下原則：1、遵循電子政務(wù)的國(guó)家標(biāo)準(zhǔn)、行業(yè)標(biāo)準(zhǔn)、國(guó)際標(biāo)準(zhǔn)標(biāo)準(zhǔn)和規(guī)范的制訂繼承和貫徹國(guó)家標(biāo)準(zhǔn)、行業(yè)標(biāo)準(zhǔn)，參考國(guó)際標(biāo)準(zhǔn)先進(jìn)標(biāo)準(zhǔn)。標(biāo)準(zhǔn)和規(guī)范的采用順序是：先國(guó)家標(biāo)準(zhǔn)，后行業(yè)標(biāo)準(zhǔn)，最后是國(guó)際標(biāo)準(zhǔn)。2、切實(shí)可行，準(zhǔn)確實(shí)用標(biāo)準(zhǔn)的制訂和修訂要求準(zhǔn)確實(shí)用，具有較強(qiáng)的可操作性。3、前瞻性強(qiáng)，易于擴(kuò)展標(biāo)準(zhǔn)的制訂和采用應(yīng)具有前瞻性并成熟可用，滿足易于擴(kuò)展的需求，使之能適應(yīng)城市智能體業(yè)務(wù)發(fā)展的變化。4、先易后難，分輕重緩急逐步實(shí)施標(biāo)準(zhǔn)規(guī)范的制定是一個(gè)復(fù)雜的系統(tǒng)工程，應(yīng)按照輕重緩急，先易后難的原則，逐步實(shí)施。5、統(tǒng)一組織，各級(jí)參與標(biāo)準(zhǔn)規(guī)范建設(shè)的制定和實(shí)施應(yīng)由市大數(shù)據(jù)局統(tǒng)一組織，各政府部門共同參與。三、標(biāo)準(zhǔn)主要內(nèi)容1、長(zhǎng)春城市智能體指標(biāo)卡片化體系卡片化，是指將數(shù)據(jù)指標(biāo)內(nèi)容封裝成固定的小區(qū)塊—場(chǎng)景或者指標(biāo)卡片，在可視化設(shè)計(jì)時(shí)，可以直接調(diào)取使用場(chǎng)景或者指標(biāo)卡片，進(jìn)行大數(shù)據(jù)可視化頁(yè)面的快速構(gòu)建。同時(shí)卡片不是封閉的場(chǎng)景或指標(biāo)的數(shù)據(jù)集合，而是有條件的可以將卡片內(nèi)部的數(shù)據(jù)和外部輸入的參數(shù)據(jù)進(jìn)行相關(guān)事件動(dòng)作；也可以將數(shù)據(jù)指標(biāo)度量有條件的傳輸?shù)娇ㄆ獠??？ㄆ亲詭邮健?shù)據(jù)及權(quán)限，可實(shí)現(xiàn)交互的組件。本部分包括指標(biāo)卡片化體系框架、指標(biāo)卡片全生命周期應(yīng)用流程等。2、長(zhǎng)春城市智能體指標(biāo)卡片設(shè)計(jì)規(guī)范統(tǒng)一設(shè)計(jì)規(guī)范目的一是為了保證卡片的設(shè)計(jì)風(fēng)格及樣式統(tǒng)一，便于可視化設(shè)計(jì)的時(shí)候形成的頁(yè)面風(fēng)格一致；二是指標(biāo)的設(shè)計(jì)要規(guī)范，便于設(shè)計(jì)人員使用時(shí)易于理解、使用和組裝。三是，內(nèi)部的交互邏輯要規(guī)范，便于后期外部調(diào)用的使用。本部分包括卡片數(shù)據(jù)指標(biāo)規(guī)范、卡片設(shè)計(jì)開(kāi)發(fā)規(guī)范等。3、長(zhǎng)春城市智能體指標(biāo)卡片管理規(guī)范按照統(tǒng)一標(biāo)準(zhǔn)規(guī)范進(jìn)行卡片管理。管理內(nèi)容主要包括：卡片的內(nèi)容、級(jí)別、類別、權(quán)限、卡片的服務(wù)設(shè)置、卡片的使用跟蹤等，便于后臺(tái)管理人員全周期的追蹤卡片的生成和使用情況。本部分包括卡片分級(jí)分類規(guī)范、卡片存儲(chǔ)規(guī)范、卡片庫(kù)安全管理規(guī)范等。4、長(zhǎng)春城市智能體指標(biāo)卡片使用規(guī)范卡片的使用規(guī)范需要定義卡片的使用范圍，卡片的外部調(diào)用使用規(guī)范，卡片參數(shù)的設(shè)置規(guī)范，最大限度的提高卡片的可用性。本部分包括卡片服務(wù)接口規(guī)范、卡片應(yīng)用規(guī)范等四