项目使用npm下载，npm i
运行环境 node：18.17.1，npm：9.6.7 。其他版本未尝试
发布步骤：
1. 打包npm: run build
2. 切换到npmjs源：npm config set registry https://registry.npmjs.org/
3. 登录npm: npm login
4. 发布到npm: npm run publish

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，否则部分数据卡无法正常显示

更新说明

$3

1. 新增dataCardList入参替换原有dataCardIdListIds用于数据卡显示
2. 增加theme主题风格适配（目前支持科技蓝、冰川青、香槟金配色）
3. 视频自定义卡增加自动播放功能（有声音的视频可能会被浏览器禁止自动播放）
4. 新增卡片-人员介绍自定义卡
5. 新增卡片-通知公告数据卡

demo

``vue


// 传入标题信息
// 大屏主标题
import {CustomListPage} from "./components";
// 标题
const pageTitle= 'ilim数据大屏'
// 副标题
const subTitle = 'ILIM-100智慧实验室信息化管理系统'

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

// 数据卡显示数据来源
const dataCardInfoData = ref({})

// ------------------------------ 数据卡‘师资队伍、科研成果、设备资产’数据 ------------------------------
// 设备资产数据
const equipmentInfoData = ref({
count: undefined,
chartData: []
})

provide('equipmentInfoData',equipmentInfoData)
/**
* @description: 获取设备资产数据
*/
const getEquipmentInfoData = ()=>{
// 获取设备状态数量
equipmentInfoData.value.count ={
normalCount:31,
repairCount : 2,
scrapCount : 3
}
equipmentInfoData.value.chartData = [

{
"typeId": null,
"type": "人体生理类附近反复反复讲解",
"totalCount": 822,
"normalCount": null,
"repairCount": null,
"scrapCount": null
},
{
"typeId": null,
"type": "信号采集类烦烦烦烦烦烦烦烦烦方法",
"totalCount": 14222,
"normalCount": null,
"repairCount": null,
"scrapCount": null
},
{
"typeId": null,
"type": "教学仪器类烦烦烦烦烦烦烦烦烦方法",
"totalCount": 222222,
"normalCount": null,
"repairCount": null,
"scrapCount": null
}
]
}
// ------------------------------ 科研成果数据 ------------------------------
const scientificInfochartData = ref([])
provide('scientificInfochartData',scientificInfochartData)
/**
* @description: 获取科研成果数据
*/
const getScientificInfochartData = ()=>{
scientificInfochartData.value = [
{
"id": 35,
"name": "科研论文啊啊啊啊",
"detail": "{\"2022\":99999,\"2023\":99999,\"2024\":99999}"
},
{
"id": 36,
"name": "专利证书1111",
"detail": "{\"2022\":88888,\"2023\":88888,\"2024\":88888}"
},
{
"id": 37,
"name": "教材著作吱吱吱吱",
"detail": "{\"2022\":77777,\"2023\":77777,\"2024\":77777}"
}
]
}
// ------------------------------ 师资队伍数据 ------------------------------
const teacherInfochartData = ref([])
provide('teacherInfochartData',teacherInfochartData)
/**
* @description: 获取师资队伍数据
*/
const getTeacherInfochartData = ()=>{

teacherInfochartData.value =[
{
"id": 30,
"name": "教授教授教授11",
"count": 88888
},
{
"id": 31,
"name": "讲师222222",
"count": 99999
}
]

}
// 获取师资队伍、科研成果、设备资产数据
const getAllApiData = ()=>{
// const = centerIdValue as number
// const versionId = usePageStoreHook().versionId as number
setTimeout(getEquipmentInfoData,2000)
// 科研成果
setTimeout(
getScientificInfochartData
,2000)
// 师资队伍
setTimeout(getTeacherInfochartData,1000)
}
// ------------------------------ 数据卡、自定义卡位置信息、数据信息 ------------------------------
// 根元素的宽高
const rootWidthHeight = {
width: 5760,
height: 3240
}
// 以下data数据来源于big-screen-version/version-detail 接口
const data = {
"dataCardIdList": [
11,
1,
2,
3
],
"dataCardList": [
{
"id": 1,
"name": "师资队伍",
"type": 1
},
{
"id": 2,
"name": "科研成果",
"type": 1
},
{
"id": 3,
"name": "设备资产",
"type": 1
}
],
"customList": [],
"coordinate": "{\"root\":{\"width\":1590,\"height\":894.375},\"dataCard\":[{\"id\":11,\"detail\":{\"left\":0,\"top\":0,\"width\":453,\"height\":214}},{\"id\":1,\"detail\":{\"left\":1228,\"top\":561,\"width\":362,\"height\":334}},{\"id\":2,\"detail\":{\"left\":865,\"width\":362,\"top\":723,\"height\":171}},{\"id\":3,\"detail\":{\"left\":75,\"width\":363,\"top\":107,\"height\":394}}],\"customCard\":[]}"
}
// 所有的数据卡id集合
const dataCardIdListIds = ref([])
// 所有的数据卡id集合
const dataCardList = ref([])
// 自定义卡数据变量
const customCardList = ref([])
// 大屏显示组件el
const dataScreenShowRef = ref()
onMounted(()=>{
dataScreenShowRef.value?.setDataCardJson( {
'师资队伍': 1,
'科研成果': 2,
'设备资产': 3,
'预约开放': 4,
'空间可视化': 5,
'安全数据': 6,
'实验人次': 7,
'实验报告': 8,
'实验成绩': 9,
'实验交流': 10
})
// ------------------------------ 以下是对data数据进行处理、获取需要的数据（目前处理方式相同）；设置位置信息 ------------------------------
// 数据卡数据ids
dataCardIdListIds.value = data?.dataCardIdList?.length ? data.dataCardIdList : []
// 数据卡列表
dataCardList.value = data?.dataCardList || []
// 位置信息
const coordinate = data.coordinate ? JSON.parse(data.coordinate) : {}
// 主容器宽高
const root = coordinate?.root
const orginDataCardCoordinateList = coordinate?.dataCard || []
// 自定义卡列表
customCardList.value = data?.customList?.length
? data.customList.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
}
})
: []
nextTick(() => {
// 数据卡坐标位置
if (orginDataCardCoordinateList?.length && dataCardIdListIds.value?.length) {
orginDataCardCoordinateList.forEach(item => {
const left = ((item.detail.left rootWidthHeight.width) / root.width) 0.01
const top = ((item.detail.top rootWidthHeight.height) / root.height) 0.01
const width = ((item.detail.width rootWidthHeight.width) / root.width) 0.01
const height = ((item.detail.height rootWidthHeight.height) / root.height) 0.01
const target = document.querySelector(.data-target${item.id}) as HTMLElement
if (!target) return
target.style.width = ${width}rem
target.style.height = ${height}rem
target.style.left = ${left}rem
target.style.top = ${top}rem
})
}
const customCardCoordinateList = coordinate?.customCard || []
// 自定义坐标位置
if (customCardCoordinateList?.length && customCardList.value?.length) {
customCardCoordinateList.forEach((item: any) => {
const left = ((item.detail.left rootWidthHeight.width) / root.width) 0.01
const top = ((item.detail.top rootWidthHeight.height) / root.height) 0.01
const width = ((item.detail.width rootWidthHeight.width) / root.width) 0.01
const height = ((item.detail.height rootWidthHeight.height) / root.height) 0.01
const target = document.querySelector(.target${item.id}) as HTMLElement
if (!target) return
target.style.width = ${width}rem
target.style.height = ${height}rem
target.style.left = ${left}rem
target.style.top = ${top}rem
})
}
})
// 获取师资队伍、科研成果、设备资产数据
getAllApiData()
})
const renderPart = (id: number) => {
const isContainId = (id: number) => {
if (dataCardIdListIds.value?.length === 0) return false
return dataCardIdListIds.value?.some(item => item === id)
}
return isContainId(id)
}
const EscreenDataCardAllId = ref({
师资队伍: 1,
科研成果: 2,
设备资产: 3,
预约开放: 4,
空间可视化: 5,
安全数据: 6,
实验人次: 7,
实验报告: 8,
实验成绩: 9,
实验交流: 10
})


ref="dataScreenShowRef"
:customCardList="customCardList"
:dataCardIdListIds="dataCardIdListIds"
:dataCardInfoData="dataCardInfoData"
:dataCardList="dataCardList"
:page-title="pageTitle"
:sub-title="subTitle"
:theme="theme"
>





``

方法

| Name | Description | type | default |
|--------------|--------------|-------------------------------|---------|
| setJSON | 设置所有可能显示的数据卡 | | {'师资队伍': 1,} |

传值

| Name | Description | type | default |
|-------------------|-----------------|------------------|---------|
| pageTitle | 标题 | string | ‘’ |
| subTitle | 副标题标题 | string | ‘’ |
| theme | 主题 | string | ‘’ |
| dataCardIdListIds | 需要显示在页面的数据卡id集合 | string | ‘’ |
| customCardList | 自定义卡数据列表 | CustomListPage[] | [] |
| dataCardList | 数据卡列表 | any[] | [] |
| dataCardInfoData | 数据卡显示数据来源 | any | {} |