@tmesoft/data-screen-show 0.0.4 → 1.0.0

package/README.md

@@ -1,18 +1,288 @@
-# Vue 3 + TypeScript + Vite
+# data-screen-show
+## 如何使用
+目前用于ilim、rlim、hps-102d数据大屏项目，用于大屏显示
+1.  pnpm i @tmesoft/data-screen-show
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## demo
+```vue
+<!--ts-->
+// 传入标题信息
+// 大屏主标题
+import {CustomListPage} from "./components";
+// 标题
+const  pageTitle= 'ilim数据大屏'
+// 副标题
+const subTitle = 'ILIM-100智慧实验室信息化管理系统'
+// ------------------------------ 数据卡‘师资队伍、科研成果、设备资产’数据 ------------------------------
+// 设备资产数据
+const equipmentInfoData = ref<any>({
+count: undefined,
+chartData: []
+})
 
-## Recommended IDE Setup
+provide('equipmentInfoData',equipmentInfoData)
+/**
+* @description: 获取设备资产数据
+*/
+const getEquipmentInfoData = ()=>{
+// 获取设备状态数量
+equipmentInfoData.value.count  ={
+normalCount:31,
+repairCount  : 2,
+scrapCount  : 3
+}
+equipmentInfoData.value.chartData = [
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+{
+"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 = ()=>{
 
-## Type Support For `.vue` Imports in TS
+teacherInfochartData.value =[
+{
+"id": 30,
+"name": "教授教授教授11",
+"count": 88888
+},
+{
+"id": 31,
+"name": "讲师222222",
+"count": 99999
+}
+]
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+}
+// 获取师资队伍、科研成果、设备资产数据
+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()
+})
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+<!--template-->
+<DataScreenShow ref="dataScreenShowRef" :page-title="pageTitle" :sub-title="subTitle" :dataCardIdListIds="dataCardIdListIds"  :customCardList="customCardList" >
+  <template #main-floor>
+    <div>3d楼层</div>
+  </template>
+  <!-- 预约开放 -->
+  <template #reservation-info>
 
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+    <div>预约开放</div>
+  </template>
+  <!--            安全模块-->
+  <template #safe-module>
+    <div>安全模块</div>
+  </template>
+
+
+  <!-- 实验人次 -->
+  <template #person-time-info>
+    <div>实验人次</div>
+  </template>
+
+  <!-- 实验报告 -->
+  <template #report-info>
+    <div>实验报告</div>
+  </template>
+
+  <!-- 实验成绩 -->
+  <template #experimental-results-info>
+    <div>实验成绩</div>
+  </template>
+
+  <!-- 实验交流 -->
+  <template #experimental-communication>
+    <div>实验交流</div>
+  </template>
+</DataScreenShow>
+
+
+```
+
+## 方法
+
+| Name         | Description | type                          | default |
+|--------------|-------------|-------------------------------|---------|
+| setJSON      | 设置所有数据卡     |                         | {'师资队伍': 1,}      |
+## 传值
+
+| Name      | Description  | type   | default |
+|-----------|--------------|--------|---------|
+| pageTitle | 标题           | string | ‘’      |
+| subTitle | 副标题标题        | string | ‘’      |
+| dataCardIdListIds | 需要显示的数据卡id集合 | string | ‘’      |
+| customCardList | 自定义卡数据         | CustomListPage[] | []      |

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

@@ -17,10 +17,6 @@ dataCardIdListIds: {
 type: PropType_2<number[]>;
 default: () => never[];
 };
-updataCardCoordinateList: {
-type: PropType_2<ICoordinateItem[]>;
-default: () => never[];
-};
 customCardList: {
 type: PropType_2<CustomListPage[]>;
 default: () => never[];
@@ -41,10 +37,6 @@ dataCardIdListIds: {
 type: PropType_2<number[]>;
 default: () => never[];
 };
-updataCardCoordinateList: {
-type: PropType_2<ICoordinateItem[]>;
-default: () => never[];
-};
 customCardList: {
 type: PropType_2<CustomListPage[]>;
 default: () => never[];
@@ -53,7 +45,6 @@ default: () => never[];
 subTitle: string;
 pageTitle: string;
 dataCardIdListIds: number[];
-updataCardCoordinateList: ICoordinateItem[];
 customCardList: CustomListPage[];
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -93,17 +84,4 @@ export declare enum EbigScreenCustomCardType {
     '文本' = 3
 }
 
-export declare interface IbigScreenCoordinate {
-    left: number;
-    width: number;
-    top: number;
-    height: number;
-}
-
-declare interface ICoordinateItem {
-    id: number;
-    width: number;
-    height: number;
-}
-
 export { }