@tmesoft/data-screen-set 0.0.1 → 0.0.2

package/README.md

@@ -1,30 +1,68 @@
-# 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.
+# data-screen-set
+## 如何使用
+用于渲染数据大屏设置
+1.  pnpm i @tmesoft/data-screen-set
 
+## demo
+```vue
+<!--ts-->
+import DataScreenSet from '@tmesoft/data-screen-set'
+/**
+* @description: 监听数据卡编辑、自定义卡上传、编辑事件
+* @param type 卡类型
+* @param id 卡id值
+*/
+const editBtnClick = (type:CardType,id:number)=>{
+console.log(type,id,'editBtnClick')
+}
+/**
+* @description: 点击拖拽卡事件
+* @param type 卡类型
+* @param id 卡id值
+*/
+const changeActive = (type:CardType,id:number) => {
+console.log(type,id,'changeActive')
+}
+/**
+* @description:  更新坐标信息
+* @param coordinate 位置信息包括数据卡和自定义卡
+* @return
+*/
+const addOrUpCoordinate = (coordinate:{dataCard:{ id: number; detail: IbigScreenCoordinate }[],customCard:{ id: number; detail: IbigScreenCoordinate }[]})=>{
+console.log(coordinate)
+}
+const dataScreenSetRef = ref()
+// 传入json数据
 
-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 dataScreenSetRef = ref()
+onMounted(()=>{
+dataScreenSetRef.value?.setDataCardListJson(
+{'师资队伍' :{id:1,idEditBtn:true},
+'科研成果':{id:2,idEditBtn:true},
+'设备资产':{id:3,idEditBtn:false},
+'预约开放':{id:4,idEditBtn:false},
+'实验室运行':{id:5,idEditBtn:true},
+'安全数据':{id:6,idEditBtn:false},
+'实验人次':{id:7,idEditBtn:false},
+'实验报告':{id:8,idEditBtn:false},
+'实验成绩':{id:9,idEditBtn:false},
+'实验交流':{id:10,idEditBtn:false}})})
+// ------------------------------ 给子组件传递参数 ------------------------------
+/**
+* @description: 大屏标题
+*/
+const title = ref('智慧化实验室')
+/**
+* @description: 自定义卡列表坐标
+*/
 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'])
+/**
+* @description: 自定义卡列表数据
+* @param
+* @return
+*/
 const _customCardList = [
 {
 "id": 133,
@@ -64,7 +102,7 @@ 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}},
@@ -76,43 +114,35 @@ const dataCardCoordinateList = ref([
 {"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(() => {
+// 当前拖拽卡片类型
+const activeType = ref<CardType>()
+// 当前拖拽卡片id
+const activeId = ref<number>()
+<!--template-->
+<data-screen-set   :customCardList="customCardList"
+                   :customCardCoordinateList="customCardCoordinateList"
+                   :dataCardCoordinateList="dataCardCoordinateList"
+                   :activeType="activeType"
+                   :activeId="activeId"
+                   :title="title"
+                   @addOrUpCoordinate="addOrUpCoordinate"
+                   @changeActive="changeActive"
+                   @editBtnClick="editBtnClick"
+                   ref="dataScreenSetRef"
+/>
+```
 
-nextTick(()=>{
+## 方法
 
-    targets.value = document.querySelector('.data-target1')
-})})
+| Name         | Description     | type                          |
+|--------------|-----------------|-------------------------------|
+| setRootWidthHeight      | 设置大屏宽高          | object {width:number,height:number}                        |
+| setDataCardListJson      | 获取组件内的数据卡json内容 |                               |
 
-// 点击自定义拖拽组件
-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)
-  }
+| Name       | Description       |
+|------------|-------------------|
+| addOrUpCoordinate | 更新坐标信息            |
+| changeActive | 修改当前拖拽元素        |
+| editBtnClick | 点击数据卡、自定义卡的编辑上传按钮 |