@tmesoft/data-screen-set 1.1.9 → 1.2.1

package/README.md

@@ -1,11 +1,24 @@
 # data-screen-set
-支持数据卡：用电排名、用电趋势、实验交流、实验成绩、仪器状态、安全、仪器使用、实验人次、
-实验报告、实验室运行、师资队伍、设备资产、预约开放、教研成果；其他数据卡需在页面使用插槽编写
+V1.1.0至V1.2.0之间版本为功能扩展过程中的产出，不建议使用，V1.2.0之后版本为正式发布版本
+支持数据卡：用电排名、用电趋势、实验交流、实验成绩、仪器状态、安全、仪器使用、实验人次、实验报告、实验室运行、师资队伍、设备资产、预约开放、教研成果、通知公告（1.2.0新增）；其他数据卡需在页面使用插槽编写
 
 ## 如何使用
 用于渲染数据大屏设置
 1.  pnpm i @tmesoft/data-screen-set
 
+## 版本说明
+1.1.0以后的版本改动较大，新增加了theme主题，新增dataCardList入参替换原有dataCardIdListIds用于数据卡显示，如需升级请务必传入dataCardList，否则部分数据卡无法正常显示
+
+## 更新说明
+### V1.2.0
+1. setDataCardListJson方法新增noRenderDataCardIds配置项（不需要渲染的数据卡id集合）
+2. 新增dataCardList入参替换原有dataCardIdListIds用于数据卡显示
+3. 增加theme主题风格适配（目前支持科技蓝、冰川青、香槟金配色）
+4. 新增卡片-人员介绍自定义卡
+5. 新增卡片-通知公告数据卡
+6. 新增数据卡、自定义卡标题修改功能
+7. 新增数据卡、自定义卡删除功能
+
 ## demo
 
 [//]: # (App.vue文件)
@@ -51,12 +64,36 @@ dataScreenSetRef.value?.setDataCardListJson(
 '实验人次':{id:7,idEditBtn:false},
 '实验报告':{id:8,idEditBtn:false},
 '实验成绩':{id:9,idEditBtn:false},
-'实验交流':{id:10,idEditBtn:false}})})
+'实验交流':{id:10,idEditBtn:false}})},[dataCardJson.今日课表.id, dataCardJson.开课情况.id])
 // ------------------------------ 给子组件传递参数 ------------------------------
 /**
 * @description: 大屏标题
 */
 const title = ref('智慧化实验室')
+
+// 传入主题
+const theme = ref('blue')
+
+// 数据卡显示数据来源
+const dataCardInfoData = ref<any>({})
+// 所有的数据卡id集合
+const dataCardList  = ref<any[]>([
+{
+"id": 1,
+"name": "师资队伍",
+"type": 1
+},
+{
+"id": 2,
+"name": "科研成果",
+"type": 1
+},
+{
+"id": 3,
+"name": "设备资产",
+"type": 1
+}
+])
 /**
 * @description: 自定义卡列表坐标
 */
@@ -111,45 +148,83 @@ isEdit: false
 const dataCardCoordinateList = ref([
 {"id":1,"detail":{"left":0,"width":367,"top":75,"height":173}},
 {"id":2,"detail":{"left":0,"width":365,"top":270,"height":172}},
-{"id":3,"detail":{"left":0,"width":365,"top":455,"height":172}},
-{"id":4,"detail":{"left":0,"width":379,"top":685,"height":179}},
-{"id":5,"detail":{"left":370,"width":493,"top":75,"height":366}},
-{"id":6,"detail":{"left":565,"width":540,"top":455,"height":158}},
-{"id":7,"detail":{"left":865,"width":295,"top":70,"height":139}},
-{"id":8,"detail":{"left":865,"width":365,"top":250,"height":172}},
-{"id":9,"detail":{"left":1225,"width":276,"top":355,"height":131}},
-{"id":10,"detail":{"left":895,"width":324,"top":695,"height":153}}])
+{"id":3,"detail":{"left":0,"width":365,"top":455,"height":172}}])
 // 当前拖拽卡片类型
 const activeType = ref<CardType>()
 // 当前拖拽卡片id
 const activeId = ref<number>()
+/**
+ * 修改自定义卡配置
+ * @param item 自定义卡 
+ */
+const changeCustomCardConfig=(item: any) => {
+  return new Promise((resolve) => {
+    let index = customCardList.value.findIndex(itemItem => itemItem.id === item.id)
+    if (typeof item.name !== 'undefined') {
+      customCardList.value[index] = { ...customCardList.value[index], name: item.name }
+    }
+    if (typeof item.detail !== 'undefined') {
+      customCardList.value[index] = { ...customCardList.value[index], detail: item.detail }
+    }
+    console.log('修改成功', customCardList.value[index])
+    resolve(true)
+  })
+}
+/**
+ * 修改自定义卡配置
+ * @param item 自定义卡
+ */
+const changeDataCardConfig=(item: any) => {
+  return new Promise((resolve) => {
+    let index = dataCardList.value.findIndex(itemItem => itemItem.id === item.id)
+    if (typeof item.alias !== 'undefined') {
+      dataCardList.value[index] = { ...dataCardList.value[index], alias: item.alias }
+    }
+    if (typeof item.detail !== 'undefined') {
+      dataCardList.value[index] = { ...dataCardList.value[index], detail: item.detail }
+    }
+    resolve(true)
+  })
+}
+// 移除指定数据卡
+const deleteBtnClick = (type: CardType, id: number) => {
+}
+    
 <!--template-->
-<data-screen-set   :customCardList="customCardList"
+<data-screen-set   :activeId="activeId"
+                   :activeType="activeType"
+                   :changeCustomCardConfig="changeCustomCardConfig"
+                   :changeDataCardConfig="changeDataCardConfig"
                    :customCardCoordinateList="customCardCoordinateList"
+                   :customCardList="customCardList"
                    :dataCardCoordinateList="dataCardCoordinateList"
-                   :activeType="activeType"
-                   :activeId="activeId"
+                   :dataCardList="dataCardList"
+                   :theme="theme"
                    :title="title"
                    @addOrUpCoordinate="addOrUpCoordinate"
                    @changeActive="changeActive"
                    @editBtnClick="editBtnClick"
+                   @deleteBtnClick="deleteBtnClick"
                    ref="dataScreenSetRef"
 />
 ```
 
 ## 方法
 
-| Name         | Description                                                                                              | type                          |
-|--------------|----------------------------------------------------------------------------------------------------------|-------------------------------|
-| setRootWidthHeight      | 设置大屏宽高                                                                                                   | object {width:number,height:number}                        |
-| setDataCardListJson      | 需要显示的数据卡json配置项（idEditBtn：是否显示右侧编辑按钮。id：数据卡唯一值。isShowRealData用于师资队伍，设备资产，科研成果代表是否显示真实图表数据，目前hps项目使用真实图表） |                               |
+| Name                   | Description                                                                                                                                                   | type                          |
+|------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------|
+| setRootWidthHeight     | 设置大屏宽高                                                                                                                                                        | object {width:number,height:number}                        |
+| setDataCardListJson    | dataCardJson: 数据卡配置数据卡json配置项（idEditBtn：是否显示右侧编辑按钮。id：数据卡唯一值。isShowRealData用于师资队伍，设备资产，科研成果代表是否显示真实图表数据，目前hps项目使用真实图表）<br/>noRenderDataCardIds: 不需要渲染的数据卡id集合 |                               |
+| handleTextScroll       | 文本组件滚动                                                                                                                                                        |                               |
+| handleNoticeInfoScroll | 通知公告滚动                                                                                                                                                        |                               |
 
 
 ## 事件
 
-| Name       | Description       |
-|------------|-------------------|
+| Name              | Description       |
+|-------------------|-------------------|
 | addOrUpCoordinate | 更新坐标信息            |
-| changeActive | 修改当前拖拽元素        |
-| editBtnClick | 点击数据卡、自定义卡的编辑上传按钮 |
-| handleTextScroll      | 文字滚动            |
+| changeActive      | 修改当前拖拽元素        |
+| editBtnClick      | 点击数据卡、自定义卡的编辑上传按钮 |
+| handleTextScroll  | 文字滚动            |
+| deleteBtnClick      | 点击数据卡、自定义卡的删除按钮 |

package/dist/data-screen-set-lib.d.ts

@@ -346,7 +346,7 @@ export declare interface CustomListPage {
     swiperTime?: number;
     isLoop?: boolean;
     volume?: boolean;
-    isEdit: boolean;
+    isEdit?: boolean;
 }
 
 export declare const DataScreenSet: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;