@tmesoft/data-screen-show 1.1.7 → 1.2.1

package/README.md

@@ -8,10 +8,22 @@
 
 
 # data-screen-show
+1.1.0至1.2.0之间版本为功能扩展过程中的产出，不建议使用，1.2.0之后版本为正式发布版本
 ## 如何使用
 目前用于ilim、rlim、hps-102d数据大屏项目，用于大屏显示
 1.  pnpm i @tmesoft/data-screen-show
 
+## 版本说明
+1.1.0以后的版本改动较大，新增加了theme主题，新增dataCardList入参替换原有dataCardIdListIds用于数据卡显示，如需升级请务必传入dataCardList，否则部分数据卡无法正常显示
+
+## 更新说明
+### V1.2.0
+1. 新增dataCardList入参替换原有dataCardIdListIds用于数据卡显示
+2. 增加theme主题风格适配（目前支持科技蓝、冰川青、香槟金配色）
+3. 视频自定义卡增加自动播放功能（有声音的视频可能会被浏览器禁止自动播放）
+4. 新增卡片-人员介绍自定义卡
+5. 新增卡片-通知公告数据卡
+
 ## demo
 ```vue
 <!--src/view/index.vue文件-->
@@ -23,6 +35,13 @@ import {CustomListPage} from "./components";
 const  pageTitle= 'ilim数据大屏'
 // 副标题
 const subTitle = 'ILIM-100智慧实验室信息化管理系统'
+
+// 传入主题
+const theme = ref('blue')
+
+// 数据卡显示数据来源
+const dataCardInfoData = ref<any>({})
+
 // ------------------------------ 数据卡‘师资队伍、科研成果、设备资产’数据 ------------------------------
 // 设备资产数据
 const equipmentInfoData = ref<any>({
@@ -164,6 +183,8 @@ const data = {
 }
 // 所有的数据卡id集合
 const dataCardIdListIds  = ref<number[]>([])
+// 所有的数据卡id集合
+const dataCardList  = ref<any[]>([])
 // 自定义卡数据变量
 const customCardList = ref<CustomListPage[]>([])
 // 大屏显示组件el
@@ -183,7 +204,9 @@ dataScreenShowRef.value?.setDataCardJson( {
 })
 // ------------------------------ 以下是对data数据进行处理、获取需要的数据（目前处理方式相同）；设置位置信息 ------------------------------
 // 数据卡数据ids
-dataCardIdListIds.value = data?.dataCardIdList?.length ? data.dataCardIdList : []
+dataCardIdListIds.value = data?.dataCardIdList?.length ? data.dataCardIdList : [] 
+// 数据卡列表
+dataCardList.value = data?.dataCardList || []
 // 位置信息
 const coordinate = data.coordinate ? JSON.parse(data.coordinate) : {}
 // 主容器宽高
@@ -263,7 +286,16 @@ const EscreenDataCardAllId = ref<any>({
   })
 
 <!--template-->
-  <DataScreenShow ref="dataScreenShowRef" :page-title="pageTitle" :sub-title="subTitle" :dataCardIdListIds="dataCardIdListIds"  :customCardList="customCardList" >
+  <DataScreenShow 
+      ref="dataScreenShowRef"
+      :customCardList="customCardList"
+      :dataCardIdListIds="dataCardIdListIds"
+      :dataCardInfoData="dataCardInfoData"
+      :dataCardList="dataCardList"
+      :page-title="pageTitle"
+      :sub-title="subTitle"
+      :theme="theme"
+  >
     <!-- 预约开放 -->
     <div
         ref="reservationInfoRef"
@@ -335,9 +367,12 @@ const EscreenDataCardAllId = ref<any>({
 | setJSON      | 设置所有可能显示的数据卡 |                         | {'师资队伍': 1,}      |
 ## 传值
 
-| Name      | Description     | type   | default |
-|-----------|-----------------|--------|---------|
-| pageTitle | 标题              | string | ‘’      |
-| subTitle | 副标题标题           | string | ‘’      |
-| dataCardIdListIds | 需要显示在页面的数据卡id集合 | string | ‘’      |
-| customCardList | 自定义卡数据列表        | CustomListPage[] | []      |
+| Name              | Description     | type             | default |
+|-------------------|-----------------|------------------|---------|
+| pageTitle         | 标题              | string           | ‘’      |
+| subTitle          | 副标题标题           | string           | ‘’      |
+| theme             | 主题              | string           | ‘’      |
+| dataCardIdListIds | 需要显示在页面的数据卡id集合 | string           | ‘’      |
+| customCardList    | 自定义卡数据列表        | CustomListPage[] | []      |
+| dataCardList      | 数据卡列表        | any[]            | []      |
+| dataCardInfoData  | 数据卡显示数据来源        | any              | {}      |