@tmesoft/data-screen-set

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

<!--ts-->
import DataScreenSet from '@tmesoft/data-screen-set'
/**
* @description: 监听数据卡编辑、自定义卡上传、编辑事件
* @param type 卡类型
* @param id 卡id值
*/
const editBtnClick = (type:CardType,id:number)=>{
console.log(type,id,'editBtnClick')
}
/**
* @description: 点击拖拽卡事件
* @param type 卡类型
* @param id 卡id值
*/
const changeActive = (type:CardType,id:number) => {
console.log(type,id,'changeActive')
}
/**
* @description:  更新坐标信息
* @param coordinate 位置信息包括数据卡和自定义卡
* @return
*/
const addOrUpCoordinate = (coordinate:{dataCard:{ id: number; detail: IbigScreenCoordinate }[],customCard:{ id: number; detail: IbigScreenCoordinate }[]})=>{
console.log(coordinate)
}
const dataScreenSetRef = ref()
// 传入json数据

const dataScreenSetRef = ref()
onMounted(()=>{
dataScreenSetRef.value?.setDataCardListJson(
{'师资队伍' :{id:1,idEditBtn:true},
'科研成果':{id:2,idEditBtn:true},
'设备资产':{id:3,idEditBtn:false},
'预约开放':{id:4,idEditBtn:false},
'实验室运行':{id:5,idEditBtn:true},
'安全数据':{id:6,idEditBtn:false},
'实验人次':{id:7,idEditBtn:false},
'实验报告':{id:8,idEditBtn:false},
'实验成绩':{id:9,idEditBtn:false},
'实验交流':{id:10,idEditBtn:false}})},[dataCardJson.今日课表.id, dataCardJson.开课情况.id])
// ------------------------------ 给子组件传递参数 ------------------------------
/**
* @description: 大屏标题
*/
const title = ref('智慧化实验室')

// 传入主题
const theme = ref('blue')

// 版本id
const versionId = ref(3)

// 数据卡显示数据来源
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: 自定义卡列表坐标
*/
const customCardCoordinateList = ref([{"id":133,"detail":{"left":1129,"width":380,"top":397,"height":228}},
{"id":134,"detail":{"left":120,"width":308,"top":210,"height":273}},
{"id":135,"detail":{"left":649,"width":360,"top":235,"height":271}}])
/**
* @description: 自定义卡列表数据
* @param
* @return
*/
const _customCardList = [
{
"id": 133,
"bigScreenVersionId": 3,
"type": 1,
"name": "图片11111111111",
"detail": "{\"list\":[{\"name\":\"1686030913404(1).jpg\",\"url\":\"http://172.16.3.208:8802/tmeFile/ILIM/image/1662/5b793a456cc4016637bc75f9dd28a2b4.jpg\",\"size\":200911,\"uid\":1725945117909,\"status\":\"success\"},{\"name\":\"矢量智能对象2.png\",\"url\":\"http://172.16.3.208:8802/tmeFile/ILIM/image/1663/36bf622f16b1afe40d5e669870d06a92.png\",\"size\":291,\"uid\":1725945285946,\"status\":\"success\"}],\"swiperTime\":3}"
},
{
"id": 134,
"bigScreenVersionId": 3,
"type": 3,
"name": "文本1111111111111",
"detail": "{\"list\":[{\"value\":\"<p><span style=\\\"color: #ecf0f1;\\\">3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span></p>\\n<h1 style=\\\"padding: 18px 0px; font-weight: 400; line-height: 42px; color: #333333; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff; font-size: 30px !important; margin: 0px 0px 20px !important 0px;\\\">公众平台服务号、订阅号、企业微信、小程序的相关说明</h1>\\n<section class=\\\"_135editor\\\" style=\\\"margin: 0px; padding: 0px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; font-size: 12px; background-color: #ffffff; border: 0px none; position: relative;\\\" data-tools=\\\"135编辑器\\\" data-id=\\\"90143\\\" data-color=\\\"rgb(12, 137, 24)\\\" data-custom=\\\"rgb(12, 137, 24)\\\">\\n<section style=\\\"margin: 0px; padding: 0px;\\\">\\n<section style=\\\"margin: 0px; padding: 0px 3px 0px 0px; display: inline-block; vertical-align: middle;\\\">\\n<section style=\\\"margin: 0px; padding: 0px; border-top: 3px solid transparent; border-left: 3px solid #666666; float: right;\\\"></section>\\n<section style=\\\"margin: 0px 3px 0px 0px; padding: 1em; background: #0c8918; color: #ffffff; transform: rotate(360deg);\\\">\\n<p class=\\\"autonum\\\" style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px;\\\" title=\\\"\\\" data-original-title=\\\"\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\">1</strong></p>\\n</section>\\n<section style=\\\"margin: -3px 0px 0px; padding: 0px; border-bottom: 3px solid transparent; border-left: 3px solid #666666; float: right;\\\"></section>\\n</section>\\n \\n<section style=\\\"margin: 0px 0px 0px -3em; padding: 0.8em 1em 0.8em 3em; display: inline-block; vertical-align: middle; background: #eeeeee; line-height: 1.5;\\\">\\n<p class=\\\"135brush\\\" style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px;\\\" data-brushtype=\\\"text\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\"> 公众号类型功能介绍</strong>  </p>\\n</section>\\n</section>\\n</section>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\"> </p>\\n<div style=\\\"margin: 0px; padding: 0px; max-width: 100%; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff; text-align: center;\\\"><img style=\\\"margin: 15px 0px 25px; padding: 0px; border: 1px solid #e5e5e5; outline: none; vertical-align: bottom; max-width: 100%; display: inline-block;\\\" src=\\\"http://file.service.qq.com/user-files/uploads/201708/d983e67521397c6a61fa196c1e378a38.jpg\\\" /></div>\\n<p> </p>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\"> </p>\\n<section class=\\\"_135editor\\\" style=\\\"margin: 0px; padding: 0px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; font-size: 12px; background-color: #ffffff; border: 0px none; position: relative;\\\" data-tools=\\\"135编辑器\\\" data-id=\\\"90143\\\" data-color=\\\"rgb(12, 137, 24)\\\" data-custom=\\\"rgb(12, 137, 24)\\\">\\n<section style=\\\"margin: 0px; padding: 0px;\\\">\\n<section style=\\\"margin: 0px; padding: 0px 3px 0px 0px; display: inline-block; vertical-align: middle;\\\">\\n<section style=\\\"margin: 0px; padding: 0px; border-top: 3px solid transparent; border-left: 3px solid #666666; float: right;\\\"></section>\\n<section style=\\\"margin: 0px 3px 0px 0px; padding: 1em; background: #0c8918; color: #ffffff; transform: rotate(360deg);\\\">\\n<p class=\\\"autonum\\\" style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px;\\\" title=\\\"\\\" data-original-title=\\\"\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\">2</strong></p>\\n</section>\\n<section style=\\\"margin: -3px 0px 0px; padding: 0px; border-bottom: 3px solid transparent; border-left: 3px solid #666666; float: right;\\\"></section>\\n</section>\\n \\n<section style=\\\"margin: 0px 0px 0px -3em; padding: 0.8em 1em 0.8em 3em; display: inline-block; vertical-align: middle; background: #eeeeee; line-height: 1.5;\\\">\\n<p class=\\\"135brush\\\" style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px;\\\" data-brushtype=\\\"text\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\"> 服务号、订阅号功能区别 </strong></p>\\n</section>\\n</section>\\n</section>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff; text-align: center;\\\"><img style=\\\"margin: 15px 0px 25px; padding: 0px; border: 1px solid #e5e5e5; outline: none; vertical-align: bottom; max-width: 100%; display: inline-block;\\\" src=\\\"http://file.service.qq.com/user-files/uploads/201708/a12daf5a6a2cf4c01618569b1b9e5881.jpg\\\" /></p>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\"> </p>\\n<section class=\\\"_135editor\\\" style=\\\"margin: 0px; padding: 0px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; font-size: 12px; background-color: #ffffff; border: 0px none; position: relative;\\\" data-tools=\\\"135编辑器\\\" data-id=\\\"90143\\\" data-color=\\\"rgb(12, 137, 24)\\\" data-custom=\\\"rgb(12, 137, 24)\\\">\\n<section style=\\\"margin: 0px; padding: 0px;\\\">\\n<section style=\\\"margin: 0px; padding: 0px 3px 0px 0px; display: inline-block; vertical-align: middle;\\\">\\n<section style=\\\"margin: 0px; padding: 0px; border-top: 3px solid transparent; border-left: 3px solid #666666; float: right;\\\"></section>\\n<section style=\\\"margin: 0px 3px 0px 0px; padding: 1em; background: #0c8918; color: #ffffff; transform: rotate(360deg);\\\">\\n<p class=\\\"autonum\\\" style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px;\\\" title=\\\"\\\" data-original-title=\\\"\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\">3</strong></p>\\n</section>\\n<section style=\\\"margin: -3px 0px 0px; padding: 0px; border-bottom: 3px solid transparent; border-left: 3px solid #666666; float: right;\\\"></section>\\n</section>\\n \\n<section style=\\\"margin: 0px 0px 0px -3em; padding: 0.8em 1em 0.8em 3em; display: inline-block; vertical-align: middle; background: #eeeeee; line-height: 1.5;\\\">\\n<p class=\\\"135brush\\\" style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px;\\\" data-brushtype=\\\"text\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\"> 小程序介绍</strong>  </p>\\n</section>\\n</section>\\n</section>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\">     </strong></p>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\"><strong style=\\\"margin: 0px; padding: 0px; font-size: 1em;\\\">    主要优势</strong></p>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\">    1、用户可便捷地获取服务，无需安装或下载即可使用；</p>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\">    2、具有更丰富的功能和出色的使用体验；</p>\\n<p style=\\\"margin: 0px; padding: 0px; line-height: 24px; font-size: 15px; color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; background-color: #ffffff;\\\">    3、封装一系列接口能力，帮助快速开发和迭代。</p>\\n<p><span style=\\\"color: #ecf0f1;\\\"><img style=\\\"color: #666666; font-family: 'PingFang SC', 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; font-size: 15px; text-align: center; margin: 15px 0px 25px; padding: 0px; border: 1px solid #e5e5e5; outline: none; vertical-align: bottom; max-width: 100%; display: inline-block;\\\" src=\\\"http://file.service.qq.com/user-files/uploads/201708/df54931c8573912639ef393f44f65ece.jpg\\\" />ee</span></p>\",\"scroll\":true}],\"swiperTime\":20}"
},
{
"id": 135,
"bigScreenVersionId": 3,
"type": 2,
"name": "视频333333333333333333",
"detail": "{\"list\":[{\"name\":\"2minute-demo.mp4\",\"url\":\"http://172.16.3.208:8802/tmeFile/ILIM/video/1664/d12d99ae6eb88e4990e9d226c10b8428.mp4\",\"size\":2865389,\"uid\":1725946661731,\"status\":\"success\"}],\"isLoop\":true,\"volume\":true}"
}
]
const customCardList =ref<CustomListPage[]>( _customCardList?.length
? _customCardList.map(item => {
const detail = item.detail ? JSON.parse(item.detail) : {}
return {
id: item.id,
bigScreenVersionId: item.bigScreenVersionId,
type: item.type,
name: item.name,
list: detail?.list || [],
swiperTime: detail?.swiperTime,
isLoop: detail?.isLoop,
volume: detail?.volume,
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}}])
// 当前拖拽卡片类型
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   :versionId="versionId"
                   :activeId="activeId"
                   :activeType="activeType"
                   :changeCustomCardConfig="changeCustomCardConfig"
                   :changeDataCardConfig="changeDataCardConfig"
                   :customCardCoordinateList="customCardCoordinateList"
                   :customCardList="customCardList"
                   :dataCardCoordinateList="dataCardCoordinateList"
                   :dataCardList="dataCardList"
                   :theme="theme"
                   :title="title"
                   @addOrUpCoordinate="addOrUpCoordinate"
                   @changeActive="changeActive"
                   @editBtnClick="editBtnClick"
                   @deleteBtnClick="deleteBtnClick"
                   ref="dataScreenSetRef"
/>

方法

事件