Эх сурвалжийг харах

Merge branch 'deploy' of github.com:le5le-com/visualization-design into deploy

Alsmile 1 жил өмнө
parent
commit
ab1356b213

+ 2 - 2
index.html

@@ -24,10 +24,10 @@
       }
     </style>
     <link
-      href="//at.alicdn.com/t/c/font_4042197_yrikqthz1j.css"
+      href="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.css"
       rel="stylesheet"
     />
-    <script src="//at.alicdn.com/t/c/font_4042197_yrikqthz1j.js"></script>
+    <script src="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.js"></script>
   </head>
   <body>
     <div id="app"></div>

+ 1 - 1
src/services/common.ts

@@ -129,7 +129,7 @@ export const save = async (
   if (!(data.teams && data.owner?.id !== user.id)) {
     let blob: Blob;
     try {
-      blob = dataURLtoBlob(meta2d.toPng(10) + '');
+      blob = dataURLtoBlob(meta2d.toPng(0) + '');
     } catch (e) {
       MessagePlugin.error(
         '无法下载,宽度不合法,画布可能没有画笔/画布大小超出浏览器最大限制'

+ 150 - 84
src/services/defaults.ts

@@ -926,7 +926,7 @@ export const formComponents = [
     list: [
       {
         name: '文本',
-        icon: 'l-text',
+        icon: 'l-wenben',
         data: {
           width: 160,
           height: 30,
@@ -936,7 +936,7 @@ export const formComponents = [
       },
       {
         name: '数字',
-        icon: 'l-text',
+        icon: 'l-shuzi',
         data: {
           width: 160,
           height: 30,
@@ -974,7 +974,7 @@ export const formComponents = [
       },
       {
         name: '图片',
-        icon: 'l-image',
+        icon: 'l-tupian',
         data: {
           width: 100,
           height: 100,
@@ -984,7 +984,7 @@ export const formComponents = [
       },
       {
         name: 'GIF',
-        icon: 'l-image',
+        icon: 'l-GIF',
         data: {
           width: 100,
           height: 100,
@@ -994,7 +994,7 @@ export const formComponents = [
       },
       {
         name: '视频',
-        icon: 'l-pc',
+        icon: 'l-shipin',
         data: {
           width: 200,
           height: 200,
@@ -1020,7 +1020,7 @@ export const formComponents = [
       },
       {
         name: '音频',
-        icon: 'l-pc',
+        icon: 'l-yinpin',
         data: {
           width: 200,
           height: 200,
@@ -1031,7 +1031,7 @@ export const formComponents = [
       },
       {
         name: '头像',
-        icon: 'l-pc',
+        icon: 'l-touxiang',
         data: {
           width: 30,
           height: 30,
@@ -1047,7 +1047,7 @@ export const formComponents = [
       },
       {
         name: '徽标',
-        icon: 'l-pc',
+        icon: 'l-huibiao',
         data: {
           width: 35,
           height: 20,
@@ -1061,7 +1061,7 @@ export const formComponents = [
       },
       {
         name: '标签',
-        icon: 'l-pc',
+        icon: 'l-biaoqian',
         data: {
           text: 'success',
           width: 80,
@@ -1090,7 +1090,7 @@ export const formComponents = [
     list: [
       {
         name: '时间',
-        icon: 'l-shijianxuanzekuang',
+        icon: 'l-clock',
         data: {
           name: 'leTime',
           width: 300,
@@ -1102,7 +1102,7 @@ export const formComponents = [
       },
       {
         name: '倒计时',
-        icon: 'l-shijianxuanzekuang',
+        icon: 'l-daojishi',
         data: {
           name: 'countdown',
           width: 300,
@@ -1115,7 +1115,7 @@ export const formComponents = [
       },
       {
         name: '水平时间轴',
-        icon: 'l-shijianzhou',
+        icon: 'l-shuipingshijianzhou',
         data: {
           name: 'leTimeline',
           width: 500,
@@ -1152,7 +1152,7 @@ export const formComponents = [
       },
       {
         name: '垂直时间轴',
-        icon: 'l-shijianzhou',
+        icon: 'l-chuizhishijianzhou',
         data: {
           name: 'leTimeline',
           width: 40,
@@ -1189,7 +1189,7 @@ export const formComponents = [
       },
       {
         name: '日历',
-        icon: 'l-pc',
+        icon: 'l-rili',
         data: {
           width: 200,
           height: 200,
@@ -1204,7 +1204,7 @@ export const formComponents = [
     list: [
       {
         name: '列表',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-liebiao
         data: {
           width: 200,
           height: 200,
@@ -1304,7 +1304,7 @@ export const formComponents = [
       },
       {
         name: '树',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-shu
         data: {
           width: 200,
           height: 200,
@@ -1312,7 +1312,7 @@ export const formComponents = [
       },
       {
         name: '网页',
-        icon: 'l-02',
+        icon: 'l-iframe',
         data: {
           name: 'iframe',
           width: 500,
@@ -1329,7 +1329,7 @@ export const formComponents = [
     list: [
       {
         name: '业务指标',
-        icon: 'l-pc',
+        icon: 'l-yewuzhibiao',
         data: {
           width: 115,
           height: 25,
@@ -1361,7 +1361,7 @@ export const formComponents = [
       },
       {
         name: '全局消息',
-        icon: 'l-pc',
+        icon: 'l-quanjuxiaoxi',
         data: {
           width: 200,
           height: 46,
@@ -1388,20 +1388,20 @@ export const formComponents = [
       },
       {
         name: '通知',
-        icon: 'l-pc',
-        data: {
-          width: 200,
-          height: 200,
-        },
-      },
-      {
-        name: '对话框',
-        icon: 'l-pc',
+        icon: 'l-tongzhi',
         data: {
           width: 200,
           height: 200,
         },
       },
+      // {
+      //   name: '对话框',
+      //   icon: 'l-pc',
+      //   data: {
+      //     width: 200,
+      //     height: 200,
+      //   },
+      // },
     ],
   },
   {
@@ -1410,7 +1410,7 @@ export const formComponents = [
     list: [
       {
         name: '水平轮播',
-        icon: 'l-shijianzhou',
+        icon: 'l-paomadeng',
         data: {
           name: 'leSwiperline',
           width: 200,
@@ -1421,7 +1421,7 @@ export const formComponents = [
       },
       {
         name: '垂直轮播',
-        icon: 'l-shijianzhou',
+        icon: 'l-chuizhigundong',
         data: {
           name: 'leSwiperline',
           width: 200,
@@ -1434,7 +1434,7 @@ export const formComponents = [
       },
       {
         name: '轮播图',
-        icon: 'l-pc',
+        icon: 'l-lunbotu',
         data: {
           name: 'leSwiper',
           width: 400,
@@ -1467,7 +1467,7 @@ export const formComponents = [
       },
       {
         name: '轮播页面',
-        icon: 'l-pc',
+        icon: 'l-lunboyemian',
         data: {
           name: 'leSwiper',
           width: 400,
@@ -1495,7 +1495,7 @@ export const formComponents = [
     list: [
       {
         name: '链接',
-        icon: 'l-pc',
+        icon: 'l-lianjie',
         data: {
           text: '乐吾乐2D编辑器',
           width: 100,
@@ -1518,15 +1518,26 @@ export const formComponents = [
       },
       {
         name: '返回',
-        icon: 'l-pc',
+        icon: 'l-fanhui',
         data: {
-          width: 200,
-          height: 200,
+          width: 40,
+          height: 40,
+          name: 'image',
+          icon: '\ue697',
+          iconFamily: 'l-icon',
+          events: [
+            {
+              action: 5,
+              name: 'click',
+              value: 'window.history.go(-1);',
+              where: { type: null },
+            },
+          ],
         },
       },
       {
         name: '锚点',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-anchor
         data: {
           width: 200,
           height: 200,
@@ -1534,7 +1545,7 @@ export const formComponents = [
       },
       {
         name: '回到顶部',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-huidaodingbu
         data: {
           width: 200,
           height: 200,
@@ -1542,7 +1553,7 @@ export const formComponents = [
       },
       {
         name: '面包屑',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-mianbaoxie
         data: {
           width: 200,
           height: 200,
@@ -1550,7 +1561,7 @@ export const formComponents = [
       },
       {
         name: '下拉菜单',
-        icon: 'l-daohangcaidan',
+        icon: 'l-xialacaidan',
         data: {
           name: 'leHeadMenu',
           width: 650,
@@ -1601,7 +1612,7 @@ export const formComponents = [
       },
       {
         name: '导航菜单',
-        icon: 'l-zhediemianban',
+        icon: 'l-daohangcaidan',
         data: {
           name: 'leMenu',
           width: 200,
@@ -1664,7 +1675,7 @@ export const formComponents = [
       },
       {
         name: '分页',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-fenye
         data: {
           width: 200,
           height: 200,
@@ -1672,23 +1683,52 @@ export const formComponents = [
       },
       {
         name: '步骤条',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-buzhoutiao
         data: {
-          width: 200,
-          height: 200,
+          name: 'steps',
+          width: 500,
+          height: 40,
+          hiddenText: true,
+          direction: 'horizontal',
+          labelAlign: '', //left/right/alternate/top/bottom
+          mode: 'alternate', //alternate
+          data: [
+            {
+              label: '2022-01-01',
+              content: '事件一',
+              // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
+            },
+            {
+              label: '2022-01-01',
+              content: '事件一',
+            },
+            {
+              label: '2022-02-01',
+              content: '事件二',
+            },
+            {
+              label: '2022-03-01',
+              content: '事件三',
+            },
+            {
+              label: '2022-04-01',
+              content: '事件四',
+            },
+          ],
+          text: '时间轴',
         },
       },
       {
         name: '选项卡',
-        icon: 'l-pc',
+        icon: 'l-xuanxiangka',
         data: {
           name: 'leTab',
           width: 500,
           height: 50,
-          direction:'vertical',
+          direction:'horizontal',
           selectKey:'1',
           selectedKeys:[],
-          them:'',
+          theme:'',
           data:[
             {text:'场景一',key:'0',isForbidden:true},
             {text:'场景二',key:'1'},
@@ -1699,14 +1739,14 @@ export const formComponents = [
       },
       {
         name: '多选选项卡',
-        icon: 'l-pc',
+        icon: 'l-duoxiangxuanxiangka',
         data: {
-          name:'leTab',
+          name: 'leTab',
           width: 500,
           height: 50,
           direction:'horizontal',
           selectedKeys:['0'],
-          them:'multiple',
+          theme:'multiple',
           data:[
             {text:'场景一',key:'0'},
             {text:'场景二',key:'1',isForbidden:true},
@@ -1746,7 +1786,7 @@ export const formComponents = [
       },
       {
         name: '文本输入框',
-        icon: 'l-shurukuang',
+        icon: 'l-wenbenshurukuang',
         data: {
           x: 100,
           y: 100,
@@ -1757,59 +1797,85 @@ export const formComponents = [
           borderRadius: 0.05,
           input: true,
           ellipsis: true,
-          text: '输入数据',
+          text: '输入文本',
           textAlign: 'left',
-          color: '#D9D9D9FF',
-          textColor: '#000000FF',
-          hoverTextColor: '#000000FF',
-          activeTextColor: '#000000FF',
+          // color: '#D9D9D9FF',
+          // textColor: '#000000FF',
+          // hoverTextColor: '#000000FF',
+          // activeTextColor: '#000000FF',
           textLeft: 10,
         },
       },
       {
         name: '数字输入框',
-        icon: 'l-shurukuang',
-        data: {},
+        icon: 'l-shuzishurukuang',
+        data: {
+          x: 100,
+          y: 100,
+          height: 40,
+          width: 200,
+          disableAnchor: true,
+          name: 'rectangle',
+          borderRadius: 0.05,
+          input: true,
+          ellipsis: true,
+          text: '输入数字',
+          textAlign: 'left',
+          // color: '#D9D9D9FF',
+          // textColor: '#000000FF',
+          // hoverTextColor: '#000000FF',
+          // activeTextColor: '#000000FF',
+          textLeft: 10,
+          events: [
+            {
+              action: 5,
+              name: 'inactive',
+              value:
+                'context.meta2d.setValue({ id: pen.id, text: parseFloat(pen.text) }, { doEvent: false });',
+              where: { type: null },
+            },
+          ],
+        },
       },
       {
         name: '单选框',
-        icon: 'l-danxuankuang',
+        icon: 'l-danxuanxiang',
         data: {
           name: 'leRadio',
-          width: 150,
+          width: 300,
           height: 30,
           disableAnchor: true,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          them:'button',
+          theme:'',
           itemPosition:[],
           data: [
-            {key:'1', text: '选项一', isForbidden: true },
-            {key:'2', text: '选项示例二' },
-            {key:'3', text: '选项三' },
+            { key: '1', text: '选项一', isForbidden: true },
+            { key: '2', text: '选项示例二' },
+            { key: '3', text: '选项三' },
           ],
           selectKey: '2',
         },
       },
       {
         name: '多选框',
-        icon: 'l-xuanzeqi',
+        icon: 'l-duoxuanxiang',
         data: {
           name: 'leCheckBox',
           width: 300,
           height: 30,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          them:'button',
+          theme:'',
           data: [
-            {key:'1', text: '选项一', isForbidden: true },
-            {key:'2', text: '选项示例二' },
-            {key:'3', text: '选项三' },
+            { key: '1', text: '选项一', isForbidden: true },
+            { key: '2', text: '选项示例二' },
+            { key: '3', text: '选项三' },
           ],
-          selectedKeys:['2','3']
+          selectedKeys: ['2', '3'],
         },
       },
       {
         name: '下拉选择器',
-        icon: 'l-xuanzeqi',
+        icon: 'l-xialaxuanzekuang',
         data: {
           x: 100,
           y: 100,
@@ -1842,7 +1908,7 @@ export const formComponents = [
       },
       {
         name: '时间选择器',
-        icon: 'l-riqixuanzekuang',
+        icon: 'l-shijianxuanzekuang',
         data: {
           name: 'leInput',
           width: 200,
@@ -1870,7 +1936,7 @@ export const formComponents = [
       },
       {
         name: '颜色选择器',
-        icon: 'l-maodian',
+        icon: 'l-yansexuanzekuang',
         data: {
           name: 'leInput',
           width: 200,
@@ -1900,7 +1966,7 @@ export const formComponents = [
       },
       {
         name: '滑块',
-        icon: 'l-kaiguan',
+        icon: 'l-huakuai',
         data: {
           anchors: [],
           disableAnchor: true,
@@ -1926,7 +1992,7 @@ export const formComponents = [
     list: [
       {
         name: '圆柱水位',
-        icon: 'l-db',
+        icon: 'l-yuanzhushuiwei',
         data: {
           name: 'waterTank',
           width: 100,
@@ -1939,7 +2005,7 @@ export const formComponents = [
       },
       {
         name: '球形水位',
-        icon: 'l-shuiliujianceqi',
+        icon: 'l-qiuxingshuiwei',
         data: {
           name: 'watermeter',
           width: 100,
@@ -1958,7 +2024,7 @@ export const formComponents = [
       },
       {
         name: '指示灯',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-zhishideng',
         data: {
           name: 'indicatorLight',
           width: 100,
@@ -1990,17 +2056,17 @@ export const formComponents = [
       },
       {
         name: '圆形按钮',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-yuanxinganniu
         data: {},
       },
       {
         name: '船型开关',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-chuanxingkaiguan
         data: {},
       },
       {
         name: '转换开关',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-zhuanhuankaiguan
         data: {},
       },
       {
@@ -2044,7 +2110,7 @@ export const formComponents = [
       },
       {
         name: '空气开关',
-        icon: 'l-bodongkaiguan',
+        icon: 'l-kongqikaiguan',
         data: {
           name: 'airSwitch',
           width: 180,
@@ -2056,7 +2122,7 @@ export const formComponents = [
       },
       {
         name: '水柱温度计',
-        icon: 'l-wenduji',
+        icon: 'l-shuizhuwendu',
         data: {
           name: 'thermometer',
           width: 100,
@@ -2070,7 +2136,7 @@ export const formComponents = [
       },
       {
         name: '扁平温度计',
-        icon: 'l-wenduji',
+        icon: 'l-bianpingwendu',
         data: {
           name: 'thermometer1',
           width: 200,

+ 1 - 1
src/views/Index.vue

@@ -5,7 +5,7 @@
     <div class="design-body">
       <Graphics />
       <View />
-      <div style="border-left: 1px solid var(--color-border); z-index: 7">
+      <div style="border-left: 1px solid var(--color-border); z-index: 2">
         <FileProps v-if="selections.mode === SelectionMode.File" />
         <PenProps v-else-if="selections.mode === SelectionMode.Pen" />
         <PensProps v-else />

+ 3 - 1
src/views/components/ElementTree.vue

@@ -160,6 +160,7 @@ onBeforeMount(() => {
   meta2d.on('delete', getTree);
   meta2d.on('combine', getTree);
   meta2d.on('click', getActived);
+  meta2d.on('paste', getActived);
 
   if (inTreePanel.timer) {
     clearTimeout(inTreePanel.timer);
@@ -318,7 +319,8 @@ onBeforeUnmount(() => {
   meta2d.off('redo', getTree);
   meta2d.off('delete', getTree);
   meta2d.off('combine', getTree);
-  meta2d.on('click', getActived);
+  meta2d.off('click', getActived);
+  meta2d.off('paste', getActived);
 
   inTreePanel.timer = setTimeout(() => {
     inTreePanel.value = false;

+ 8 - 3
src/views/components/Graphics.vue

@@ -507,8 +507,12 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
   } else if (item['3d']) {
     data = {
       name: 'iframe',
-      width: 400,
-      height: 300,
+      x: 0,
+      y: 0,
+      tags: ['meta3d'],
+      zIndex: 1,
+      width: meta2d.store.data.width || meta2d.store.options.width,
+      height: meta2d.store.data.height || meta2d.store.options.height,
       externElement: true,
       iframe: 'https://view3d.le5le.com/?id=' + (item._id || item.id),
     };
@@ -1049,7 +1053,8 @@ onUnmounted(() => {
 .graphics {
   display: flex;
   flex-direction: column;
-
+  background-color: var(--color-background);
+  z-index: 2;
   .input-search {
     flex-shrink: 0;
     height: 40px;

+ 3 - 1
src/views/components/Header.vue

@@ -1028,7 +1028,9 @@ const changeDisableAnchor = () => {
 .app-header {
   display: flex;
   height: 40px;
-
+  background-color: var(--color-background);
+  position: relative;
+  z-index: 2;
   .logo {
     display: flex;
     padding: 0 16px;

+ 2 - 0
src/views/components/View.vue

@@ -1551,6 +1551,7 @@ const onSuccessChargeCloud = () => {
     height: 40px;
     flex-shrink: 0;
     padding: 0 12px;
+    z-index: 2;
 
     a {
       display: flex;
@@ -1578,6 +1579,7 @@ const onSuccessChargeCloud = () => {
   #meta2d {
     border-top: 1px solid var(--color-background-input);
     height: calc(100vh - 81px);
+    z-index: 1;
 
     :deep(.meta2d-map) {
       background: var(--color-background);