@tmesoft/data-screen-show 0.0.1 → 0.0.3

package/README.md

@@ -5,146 +5,25 @@
 
 ## demo
 ```vue
-<!--ts-->
-import DataScreenShow from '@tmesoft/data-screen-show'
-/**
-* @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 DataScreenShowRef = ref()
-// 传入json数据
+使用示例，参考App.vue文件
 
-const DataScreenShowRef = ref()
-onMounted(()=>{
-DataScreenShowRef.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}}])
-/**
-* @description: 自定义卡列表数据
-* @param
-* @return
-*/
-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 activeType = ref<CardType>()
-// 当前拖拽卡片id
-const activeId = ref<number>()
-<!--template-->
-<data-screen-show   :customCardList="customCardList"
-                   :customCardCoordinateList="customCardCoordinateList"
-                   :dataCardCoordinateList="dataCardCoordinateList"
-                   :activeType="activeType"
-                   :activeId="activeId"
-                   :title="title"
-                   @addOrUpCoordinate="addOrUpCoordinate"
-                   @changeActive="changeActive"
-                   @editBtnClick="editBtnClick"
-                   ref="DataScreenShowRef"
-/>
-```
 
 ## 方法
 
 | Name         | Description     | type                          |
 |--------------|-----------------|-------------------------------|
-| setRootWidthHeight      | 设置大屏宽高          | object {width:number,height:number}                        |
-| setDataCardListJson      | 获取组件内的数据卡json内容 |                               |
+| chartResize      | 页面改变大小时触发 |  Function         |                       |
+| setDataCardJson      | 获取组件内的数据卡json内容 |      {
+    '师资队伍': 1,
+    '科研成果': 2,
+    '设备资产': 3,
+    '预约开放': 4,
+    '空间可视化': 5,
+    '安全数据': 6,
+    '实验人次': 7,
+    '实验报告': 8,
+    '实验成绩': 9,
+    '实验交流': 10
+  }                         |
 
 
-## 事件
-
-| Name       | Description       |
-|------------|-------------------|
-| addOrUpCoordinate | 更新坐标信息            |
-| changeActive | 修改当前拖拽元素        |
-| editBtnClick | 点击数据卡、自定义卡的编辑上传按钮 |
-| handleTextScroll      | 文字滚动            |

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

@@ -0,0 +1,103 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PropType as PropType_2 } from 'vue';
+import { PublicProps } from 'vue';
+
+declare const __VLS_component: DefineComponent<globalThis.ExtractPropTypes<{
+subTitle: {
+type: StringConstructor;
+default: string;
+};
+pageTitle: {
+type: StringConstructor;
+default: string;
+};
+dataCardIdListIds: {
+type: PropType_2<number[]>;
+default: () => never[];
+};
+updataCardCoordinateList: {
+type: PropType_2<ICoordinateItem[]>;
+default: () => never[];
+};
+customCardList: {
+type: PropType_2<CustomListPage[]>;
+default: () => never[];
+};
+}>, {
+chartResize: () => void;
+setDataCardJson: (_dataCardJson: any) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<globalThis.ExtractPropTypes<{
+subTitle: {
+type: StringConstructor;
+default: string;
+};
+pageTitle: {
+type: StringConstructor;
+default: string;
+};
+dataCardIdListIds: {
+type: PropType_2<number[]>;
+default: () => never[];
+};
+updataCardCoordinateList: {
+type: PropType_2<ICoordinateItem[]>;
+default: () => never[];
+};
+customCardList: {
+type: PropType_2<CustomListPage[]>;
+default: () => never[];
+};
+}>> & Readonly<{}>, {
+subTitle: string;
+pageTitle: string;
+dataCardIdListIds: number[];
+updataCardCoordinateList: ICoordinateItem[];
+customCardList: CustomListPage[];
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare function __VLS_template(): {
+    "main-floor"?(_: {}): any;
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare interface CustomListPage {
+    id: number;
+    bigScreenVersionId: number;
+    type: EbigScreenCustomCardType;
+    name: string;
+    list: any[];
+    swiperTime?: number;
+    isLoop?: boolean;
+    volume?: boolean;
+    isEdit?: boolean;
+}
+
+export declare const DataScreenShow: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+
+export declare enum EbigScreenCustomCardType {
+    '图集' = 1,
+    '视频' = 2,
+    '文本' = 3
+}
+
+export declare interface IbigScreenCoordinate {
+    left: number;
+    width: number;
+    top: number;
+    height: number;
+}
+
+declare interface ICoordinateItem {
+    id: number;
+    width: number;
+    height: number;
+}
+
+export { }