@tmesoft/data-screen-set 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 peoren
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# Vue 3 + TypeScript + Vite
+
+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.
+
+## Recommended IDE Setup
+
+- [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).
+
+## Type Support For `.vue` Imports in TS
+
+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.
+
+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:
+
+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.
+
+
+import DataScreenSet from './components/data-screen-set/index.vue'
+import {nextTick, onMounted, ref} from "vue";
+import {CustomListPage} from "./components/data-screen-set/types.ts";
+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}}])
+const emits = defineEmits(['changeDataActive','editBtnClick'])
+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 targets = ref()
+onMounted(() => {
+
+nextTick(()=>{
+
+    targets.value = document.querySelector('.data-target1')
+})})
+
+// 点击自定义拖拽组件
+const changeCustomActive = (id:number) => {
+targets.value = document.querySelector(`.target${id}`)
+}
+type CardType = 'data-target' | 'custom-target'
+const changeDataActive = (type:CardType,id:number) => {
+targets.value = document.querySelector(`.data-target${id}`)
+emits('changeDataActive',type,id)
+
+}
+const  EDataCardType =  {
+'师资队伍' : 1,
+'科研成果' : 2,
+'设备资产' : 3,
+'预约开放' : 4,
+'实验室运行' : 5,
+'安全数据' : 6,
+'实验人次' : 7,
+'实验报告':8,
+'实验成绩':9,
+'实验交流':10
+}
+/**
+* @description: 编辑按钮点击
+* @param type 数据卡、自定义卡
+* @param id 当前卡id
+* @return
+  */
+  const editBtnClick = (type:CardType,id)=>{
+  emits('editBtnClick',type,id)
+  }