@tmesoft/data-screen-show

项目使用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

如何使用

目前用于ilim、rlim、hps-102d数据大屏项目，用于大屏显示

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

demo

<!--src/view/index.vue文件-->
<!--ts-->
// 传入标题信息
// 大屏主标题
import {CustomListPage} from "./components";
// 标题
const  pageTitle= 'ilim数据大屏'
// 副标题
const subTitle = 'ILIM-100智慧实验室信息化管理系统'
// ------------------------------ 数据卡‘师资队伍、科研成果、设备资产’数据 ------------------------------
// 设备资产数据
const equipmentInfoData = ref<any>({
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<any[]>([])
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<any[]>([])
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<number[]>([])
// 自定义卡数据变量
const customCardList = ref<CustomListPage[]>([])
// 大屏显示组件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 : []
// 位置信息
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<any>({
  师资队伍: 1,
  科研成果: 2,
  设备资产: 3,
  预约开放: 4,
  空间可视化: 5,
  安全数据: 6,
  实验人次: 7,
  实验报告: 8,
  实验成绩: 9,
  实验交流: 10
  })

<!--template-->
  <DataScreenShow ref="dataScreenShowRef" :page-title="pageTitle" :sub-title="subTitle" :dataCardIdListIds="dataCardIdListIds"  :customCardList="customCardList" >
    <!-- 预约开放 -->
    <div
        ref="reservationInfoRef"
        class="info-item"
        :class="`data-target${EscreenDataCardAllId?.预约开放}`"
        v-if="renderPart(EscreenDataCardAllId?.预约开放)"
    >
      <!-- 3d 2d楼层模块 -->
      <div
          class="main-floor-container info-item"
          v-if="renderPart(EscreenDataCardAllId?.空间可视化)"
          :class="`data-target${EscreenDataCardAllId?.空间可视化}`"
      >
        3d 2d楼层模块
      </div>
      <!-- 安全模块-->
      <div  class="info-item"
            :class="`data-target${EscreenDataCardAllId?.安全数据}`"
            v-if="renderPart(EscreenDataCardAllId?.安全数据)"
            ref="safeRef" >
        安全模块
      </div>
      <!-- 实验人次 -->
      <div
          class="info-item"
          :class="`data-target${EscreenDataCardAllId?.实验人次}`"
          v-if="renderPart(EscreenDataCardAllId?.实验人次)"
      >
        实验人次

      </div>
      <!-- 实验报告 -->
      <div
          ref="reportInfoRef"
          :class="`data-target${EscreenDataCardAllId?.实验报告}`"
          class="info-item"
          v-if="renderPart(EscreenDataCardAllId?.实验报告)"
      >
        实验报告
      </div>
      <!-- 实验成绩 -->
      <div
          ref="experimentalResultsInfoRef"
          class="info-item"
          :class="`data-target${EscreenDataCardAllId?.实验成绩}`"
          v-if="renderPart(EscreenDataCardAllId?.实验成绩)"
      >
        实验成绩
      </div>
      <!-- 实验交流 -->
      <div
          ref="experimentalCommunicationRef"
          class="info-item"
          :class="`data-target${EscreenDataCardAllId?.实验交流}`"
          v-if="renderPart(EscreenDataCardAllId?.实验交流)"
      >
        实验交流
      </div>
    </div>
  </DataScreenShow>

方法

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

传值

Name	Description	type	default
pageTitle	标题	string	‘’
subTitle	副标题标题	string	‘’
dataCardIdListIds	需要显示在页面的数据卡id集合	string	‘’
customCardList	自定义卡数据列表	CustomListPage[]	[]