@tmesoft/data-screen-show 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +11 -143
  2. package/dist/data-screen-show-lib.d.ts +6 -0
  3. package/dist/data-screen-show-lib.es.js +12530 -13889
  4. package/dist/data-screen-show-lib.umd.js +41 -41
  5. package/package.json +10 -2
package/README.md CHANGED
@@ -1,150 +1,18 @@
1
- # data-screen-show
2
- ## 如何使用
3
- 用于渲染数据大屏显示
4
- 1. pnpm i @tmesoft/data-screen-show
1
+ # Vue 3 + TypeScript + Vite
5
2
 
6
- ## demo
7
- ```vue
8
- <!--ts-->
9
- import DataScreenShow from '@tmesoft/data-screen-show'
10
- /**
11
- * @description: 监听数据卡编辑、自定义卡上传、编辑事件
12
- * @param type 卡类型
13
- * @param id 卡id值
14
- */
15
- const editBtnClick = (type:CardType,id:number)=>{
16
- console.log(type,id,'editBtnClick')
17
- }
18
- /**
19
- * @description: 点击拖拽卡事件
20
- * @param type 卡类型
21
- * @param id 卡id值
22
- */
23
- const changeActive = (type:CardType,id:number) => {
24
- console.log(type,id,'changeActive')
25
- }
26
- /**
27
- * @description: 更新坐标信息
28
- * @param coordinate 位置信息包括数据卡和自定义卡
29
- * @return
30
- */
31
- const addOrUpCoordinate = (coordinate:{dataCard:{ id: number; detail: IbigScreenCoordinate }[],customCard:{ id: number; detail: IbigScreenCoordinate }[]})=>{
32
- console.log(coordinate)
33
- }
34
- const DataScreenShowRef = ref()
35
- // 传入json数据
3
+ 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.
36
4
 
37
- const DataScreenShowRef = ref()
38
- onMounted(()=>{
39
- DataScreenShowRef.value?.setDataCardListJson(
40
- {'师资队伍' :{id:1,idEditBtn:true},
41
- '科研成果':{id:2,idEditBtn:true},
42
- '设备资产':{id:3,idEditBtn:false},
43
- '预约开放':{id:4,idEditBtn:false},
44
- '实验室运行':{id:5,idEditBtn:true},
45
- '安全数据':{id:6,idEditBtn:false},
46
- '实验人次':{id:7,idEditBtn:false},
47
- '实验报告':{id:8,idEditBtn:false},
48
- '实验成绩':{id:9,idEditBtn:false},
49
- '实验交流':{id:10,idEditBtn:false}})})
50
- // ------------------------------ 给子组件传递参数 ------------------------------
51
- /**
52
- * @description: 大屏标题
53
- */
54
- const title = ref('智慧化实验室')
55
- /**
56
- * @description: 自定义卡列表坐标
57
- */
58
- const customCardCoordinateList = ref([{"id":133,"detail":{"left":1129,"width":380,"top":397,"height":228}},
59
- {"id":134,"detail":{"left":120,"width":308,"top":210,"height":273}},
60
- {"id":135,"detail":{"left":649,"width":360,"top":235,"height":271}}])
61
- /**
62
- * @description: 自定义卡列表数据
63
- * @param
64
- * @return
65
- */
66
- const _customCardList = [
67
- {
68
- "id": 133,
69
- "bigScreenVersionId": 3,
70
- "type": 1,
71
- "name": "图片11111111111",
72
- "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}"
73
- },
74
- {
75
- "id": 134,
76
- "bigScreenVersionId": 3,
77
- "type": 3,
78
- "name": "文本1111111111111",
79
- "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}"
80
- },
81
- {
82
- "id": 135,
83
- "bigScreenVersionId": 3,
84
- "type": 2,
85
- "name": "视频333333333333333333",
86
- "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}"
87
- }
88
- ]
89
- const customCardList =ref<CustomListPage[]>( _customCardList?.length
90
- ? _customCardList.map(item => {
91
- const detail = item.detail ? JSON.parse(item.detail) : {}
92
- return {
93
- id: item.id,
94
- bigScreenVersionId: item.bigScreenVersionId,
95
- type: item.type,
96
- name: item.name,
97
- list: detail?.list || [],
98
- swiperTime: detail?.swiperTime,
99
- isLoop: detail?.isLoop,
100
- volume: detail?.volume,
101
- isEdit: false
102
- }
103
- })
104
- : [])
105
- // 数据卡列表数据
106
- const dataCardCoordinateList = ref([
107
- {"id":1,"detail":{"left":0,"width":367,"top":75,"height":173}},
108
- {"id":2,"detail":{"left":0,"width":365,"top":270,"height":172}},
109
- {"id":3,"detail":{"left":0,"width":365,"top":455,"height":172}},
110
- {"id":4,"detail":{"left":0,"width":379,"top":685,"height":179}},
111
- {"id":5,"detail":{"left":370,"width":493,"top":75,"height":366}},
112
- {"id":6,"detail":{"left":565,"width":540,"top":455,"height":158}},
113
- {"id":7,"detail":{"left":865,"width":295,"top":70,"height":139}},
114
- {"id":8,"detail":{"left":865,"width":365,"top":250,"height":172}},
115
- {"id":9,"detail":{"left":1225,"width":276,"top":355,"height":131}},
116
- {"id":10,"detail":{"left":895,"width":324,"top":695,"height":153}}])
117
- // 当前拖拽卡片类型
118
- const activeType = ref<CardType>()
119
- // 当前拖拽卡片id
120
- const activeId = ref<number>()
121
- <!--template-->
122
- <data-screen-show :customCardList="customCardList"
123
- :customCardCoordinateList="customCardCoordinateList"
124
- :dataCardCoordinateList="dataCardCoordinateList"
125
- :activeType="activeType"
126
- :activeId="activeId"
127
- :title="title"
128
- @addOrUpCoordinate="addOrUpCoordinate"
129
- @changeActive="changeActive"
130
- @editBtnClick="editBtnClick"
131
- ref="DataScreenShowRef"
132
- />
133
- ```
5
+ ## Recommended IDE Setup
134
6
 
135
- ## 方法
7
+ - [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).
136
8
 
137
- | Name | Description | type |
138
- |--------------|-----------------|-------------------------------|
139
- | setRootWidthHeight | 设置大屏宽高 | object {width:number,height:number} |
140
- | setDataCardListJson | 获取组件内的数据卡json内容 | |
9
+ ## Type Support For `.vue` Imports in TS
141
10
 
11
+ 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.
142
12
 
143
- ## 事件
13
+ 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:
144
14
 
145
- | Name | Description |
146
- |------------|-------------------|
147
- | addOrUpCoordinate | 更新坐标信息 |
148
- | changeActive | 修改当前拖拽元素 |
149
- | editBtnClick | 点击数据卡、自定义卡的编辑上传按钮 |
150
- | handleTextScroll | 文字滚动 |
15
+ 1. Disable the built-in TypeScript Extension
16
+ 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17
+ 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18
+ 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
package/dist/data-screen-show-lib.d.ts CHANGED
@@ -58,7 +58,13 @@ customCardList: CustomListPage[];
58
58
  }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
59
59
 
60
60
  declare function __VLS_template(): {
61
+ "reservation-info"?(_: {}): any;
61
62
  "main-floor"?(_: {}): any;
63
+ "safe-module"?(_: {}): any;
64
+ "person-time-info"?(_: {}): any;
65
+ "report-info"?(_: {}): any;
66
+ "experimental-results-info"?(_: {}): any;
67
+ "experimental-communication"?(_: {}): any;
62
68
  };
63
69
 
64
70
  declare type __VLS_WithTemplateSlots<T, S> = T & {