data-screen-show

如何使用

用于渲染数据大屏显示

1. pnpm i @tmesoft/data-screen-show

demo

<!--ts-->
import DataScreenShow from '@tmesoft/data-screen-show'
/**
* @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 DataScreenShowRef = ref()
// 传入json数据

const DataScreenShowRef = ref()
onMounted(()=>{
DataScreenShowRef.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}})})
// ------------------------------ 给子组件传递参数 ------------------------------
/**
* @description: 大屏标题
*/
const title = ref('智慧化实验室')
/**
* @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}},
{"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}}])
// 当前拖拽卡片类型
const activeType = ref<CardType>()
// 当前拖拽卡片id
const activeId = ref<number>()
<!--template-->
<data-screen-show   :customCardList="customCardList"
                   :customCardCoordinateList="customCardCoordinateList"
                   :dataCardCoordinateList="dataCardCoordinateList"
                   :activeType="activeType"
                   :activeId="activeId"
                   :title="title"
                   @addOrUpCoordinate="addOrUpCoordinate"
                   @changeActive="changeActive"
                   @editBtnClick="editBtnClick"
                   ref="DataScreenShowRef"
/>

方法

| Name | Description | type | |--------------|-----------------|-------------------------------| | setRootWidthHeight | 设置大屏宽高 | object {width:number,height:number} | | setDataCardListJson | 获取组件内的数据卡json内容 | |

事件

| Name | Description | |------------|-------------------| | addOrUpCoordinate | 更新坐标信息 | | changeActive | 修改当前拖拽元素 | | editBtnClick | 点击数据卡、自定义卡的编辑上传按钮 | | handleTextScroll | 文字滚动 |