feat:自定义属性

src/services/defaults.ts

@@ -1062,22 +1062,22 @@ export const formComponents = [
           disableInput: true,
           lineWidth: 0,
           borderWidth: 0,
-          props: {
-            custom: [
-              {
-                key: 'progress',
-                label: '进度',
-                type: 'number',
-                max: 1,
-                min: 0,
-              },
-              {
-                key: 'progressColor',
-                label: '进度颜色',
-                type: 'color',
-              },
-            ],
-          },
+          // props: {
+          //   custom: [
+          //     {
+          //       key: 'progress',
+          //       label: '进度',
+          //       type: 'number',
+          //       max: 1,
+          //       min: 0,
+          //     },
+          //     {
+          //       key: 'progressColor',
+          //       label: '进度颜色',
+          //       type: 'color',
+          //     },
+          //   ],
+          // },
         },
       },
       {
@@ -1250,7 +1250,7 @@ export const formComponents = [
             custom: [
               {
                 key: 'audio',
-                label: '视频地址',
+                label: '音频地址',
                 type: 'string',
               },
             ],
@@ -1396,6 +1396,7 @@ export const formComponents = [
           ],
           text: '时间轴',
           props: {
+            text:true,
             custom: [
               {
                 key: 'mode',
@@ -1465,6 +1466,7 @@ export const formComponents = [
             },
           ],
           props: {
+            text:true,
             custom: [
               {
                 key: 'mode',
@@ -1557,6 +1559,7 @@ export const formComponents = [
             },
           ],
           props: {
+            text:true,
             custom: [
               {
                 key: 'data',
@@ -1615,6 +1618,8 @@ export const formComponents = [
             }
           ],
           props: {
+            look:true,
+            text:true,
             custom: [
               {
                 key: 'bordered',
@@ -2475,6 +2480,7 @@ export const formComponents = [
             },
           ],
           props: {
+            text:true,
             custom: [
               {
                 key: 'expandAll',
@@ -2541,6 +2547,7 @@ export const formComponents = [
             },
           ],
           props: {
+            text:true,
             custom: [
               {
                 key: 'data',
@@ -2578,20 +2585,20 @@ export const formComponents = [
           shadowOffsetX: 6,
           shadowOffsetY: 6,
           shadowBlur: 20,
-          props: {
-            custom: [
-              {
-                key: 'text',
-                label: '文本',
-                type: 'text',
-              },
-              {
-                key: 'textColor',
-                label: '文本颜色',
-                type: 'color',
-              },
-            ],
-          },
+          // props: {
+          //   custom: [
+          //     {
+          //       key: 'text',
+          //       label: '文本',
+          //       type: 'text',
+          //     },
+          //     {
+          //       key: 'textColor',
+          //       label: '文本颜色',
+          //       type: 'color',
+          //     },
+          //   ],
+          // },
         },
       },
       {
@@ -2682,6 +2689,7 @@ export const formComponents = [
           data: ['轮播第一次数据', '轮播第二次数据', '轮播第三次数据'],
           hiddenText: true,
           props: {
+            text:true,
             custom: [
               {
                 key: 'data',
@@ -2709,6 +2717,7 @@ export const formComponents = [
           data: ['轮播第一次数据', '轮播第二次数据', '轮播第三次数据'],
           hiddenText: true,
           props: {
+            text:true,
             custom: [
               {
                 key: 'data',
@@ -2950,6 +2959,7 @@ context.meta2d.translate(
             },
           ],
           props: {
+            text:true,
             custom: [
               {
                 key: 'gap',
@@ -3195,6 +3205,7 @@ context.meta2d.translate(
           disableInput: true,
           pageSizeOptions: [5, 10, 20, 30],
           props: {
+            text:true,
             custom: [
               {
                 key: 'total',
@@ -3275,6 +3286,7 @@ context.meta2d.translate(
             },
           },
           props: {
+            text:true,
             custom: [
               {
                 key: 'data',
@@ -3852,6 +3864,9 @@ context.meta2d.translate(
           background: '#303746',
           textColor: '#FFFFFF66',
           unit: '%',
+          props:{
+            text:true
+          } 
         },
       },
     ],
@@ -3871,22 +3886,22 @@ context.meta2d.translate(
           color: '#FFFFFF00',
           progress: 0.5,
           progressColor: '#4583FF',
-          props: {
-            custom: [
-              {
-                key: 'progress',
-                label: '水位',
-                type: 'number',
-                min:0,
-                max:1,
-              },
-              {
-                key: 'progressColor',
-                label: '水位颜色',
-                type: 'color',
-              }
-            ]
-          }
+          // props: {
+          //   custom: [
+          //     {
+          //       key: 'progress',
+          //       label: '水位',
+          //       type: 'number',
+          //       min:0,
+          //       max:1,
+          //     },
+          //     {
+          //       key: 'progressColor',
+          //       label: '水位颜色',
+          //       type: 'color',
+          //     }
+          //   ]
+          // }
         },
       },
       {
@@ -3907,6 +3922,7 @@ context.meta2d.translate(
           // minText: 'min',
           scaleShow: false,
           props: {
+            look:true,
             custom: [
               {
                 key: 'value',

src/services/echarts.ts

@@ -6874,6 +6874,31 @@ export const charts = [
             [1820, 1932, 1901, 1934, 1990, 1830, 1920],
             [1710, 1932, 1901, 1834, 1700, 1830, 1720],
           ],
+          props: {
+            text:true,
+            custom: [
+              {
+                key: 'chartsColor',
+                label: '调色盘色值列表',
+                type: 'code',
+              },
+              {
+                key: 'xAxisData',
+                label: '横坐标轴数据',
+                type: 'code',
+              },
+              {
+                key: 'data',
+                label: '纵坐标数据',
+                type: 'code',
+              },
+              {
+                key: 'smooth',
+                label: '平滑线',
+                type: 'bool',
+              }
+            ]
+          }
         },
       },
       {
@@ -6897,6 +6922,26 @@ export const charts = [
             [140, 250, 150, 80, 60, 10, 30],
             [40, 50, 180, 210, 60, 70, 30],
           ],
+          props: {
+            text:true,
+            custom: [
+              {
+                key: 'chartsColor',
+                label: '调色盘色值列表',
+                type: 'code',
+              },
+              {
+                key: 'xAxisData',
+                label: '横坐标轴数据',
+                type: 'code',
+              },
+              {
+                key: 'data',
+                label: '纵坐标数据',
+                type: 'code',
+              }
+            ]
+          }
         },
       },
       {
@@ -6928,6 +6973,26 @@ export const charts = [
           chartsRadius: [
             ['60%', '70%'],
           ],
+          props: {
+            text:true,
+            custom: [
+              {
+                key: 'chartsColor',
+                label: '调色盘色值列表',
+                type: 'code',
+              },
+              {
+                key: 'chartsRadius',
+                label: '半径范围',
+                type: 'code',
+              },
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              }
+            ]
+          }
         },
       },
       {
@@ -6956,6 +7021,36 @@ export const charts = [
           },
           animateCycle: 1,
           keepAnimateState: 0,
+          props: {
+            text:true,
+            custom: [
+              {
+                key: 'startAngle',
+                label: '起始角',
+                type: 'number',
+              },
+              {
+                key: 'endAngle',
+                label: '结束角',
+                type: 'number',
+              },
+              {
+                key: 'max',
+                label: '最大值',
+                type: 'number',
+              },
+              {
+                key: 'min',
+                label: '最小值',
+                type: 'number',
+              },
+              {
+                key: 'unit',
+                label: '单位',
+                type: 'string',
+              }
+            ]
+          }
         },
       },
       {
@@ -7000,6 +7095,16 @@ export const charts = [
             { value: 135, name: '物联网平台' },
             { value: 1548, name: '图形库' },
           ],
+          props: {
+            text:true,
+            custom: [
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+            ]
+          },
           realTimes: [
             {
               key: 'data.0.value',

src/views/components/Custom.vue

@@ -0,0 +1,206 @@
+<template>
+  <t-space direction="vertical" size="small" class="w-full">
+    <div v-for="item in props.pen.props.custom" class="form-item">
+      <label :title="item.label">{{ item.label }}</label>
+      <t-checkbox
+        class="ml-8"
+        v-if="item.type === 'bool'"
+        v-model="props.pen[item.key]"
+        @change="changeValue(item.key)"
+      />
+      <t-input-number
+        class="w-full"
+        v-else-if="item.type === 'number'"
+        v-model.number="props.pen[item.key]"
+        theme="column"
+        :max="item.max"
+        :min="item.min"
+        @change="changeValue(item.key)"
+        :placeholder="item.placeholder"
+        :allowInputOverLimit="false"
+        :decimalPlaces="2"
+      />
+      <t-color-picker
+        class="w-full"
+        v-else-if="item.type === 'color'"
+        :enable-alpha="true"
+        :recent-colors="null"
+        format="CSS"
+        :swatch-colors="defaultPureColor"
+        :color-modes="['monochrome']"
+        :show-primary-color-preview="false"
+        v-model="props.pen[item.key]"
+        @change="changeValue(item.key)"
+        :placeholder="item.placeholder"
+      />
+      <t-select
+        class="w-full"
+        v-else-if="item.type === 'select'"
+        size="small"
+        :options="item.options"
+        v-model="props.pen[item.key]"
+        @change="changeValue(item.key)"
+        :placeholder="item.placeholder"
+      />
+      <!-- <t-button
+              class="ml-8"
+              v-else-if="item.type === 'code'"
+              shape="square"
+              variant="outline"
+              style="width: 24px"
+              @click="showPropsEdit(item)"
+            >
+              <ellipsis-icon slot="icon"/>
+            </t-button> -->
+      <t-button
+        class="ml-8"
+        v-else-if="item.type === 'code'"
+        shape="square"
+        variant="outline"
+        style="width: 24px"
+        @click="showDrawer(item)"
+      >
+        <ChevronLeftDoubleIcon slot="icon" />
+      </t-button>
+      <t-slider
+        v-else-if="item.type === 'slider'"
+        v-model="props.pen[item.key]"
+        :min="0"
+        :max="1"
+        :step="0.01"
+        @change="changeValue(item.key)"
+      />
+      <t-switch
+        size="small"
+        class="mt-8 ml-8"
+        v-else-if="item.type === 'switch'"
+        v-model="props.pen[item.key]"
+        @change="changeValue(item.key)"
+      />
+      <t-input
+        class="w-full"
+        v-else
+        v-model="props.pen[item.key]"
+        @change="changeValue(item.key)"
+        :placeholder="item.placeholder"
+      />
+    </div>
+  </t-space>
+  <t-drawer
+    v-model:visible="drawer.visible"
+    :header="drawer.header"
+    cancelBtn="关闭"
+    confirmBtn="运行"
+    @confirm="onConfirmDrawer"
+    :closeOnOverlayClick="false"
+    :sizeDraggable="true"
+  >
+    <div style="height: 100%">
+      <CodeEditor
+        style="height: 100%"
+        :key="drawer.randomkey"
+        :json="true"
+        :language="'json'"
+        v-model="drawer.value"
+      />
+    </div>
+    <div class="gray" style="font-size: 12px">
+      {{ drawer.placeholder }}
+    </div>
+  </t-drawer>
+</template>
+
+<script lang="ts" setup>
+import { reactive, defineComponent, ref } from 'vue';
+import {
+  getter,
+  setter,
+  queryURLParams,
+  deepClone,
+  getAllChildren,
+  Pen,
+} from '@meta2d/core';
+import { getLe5le3d, getLe5leV, getLe5le2d } from '@/services/api';
+import { updatePen } from './pen';
+import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { s8 } from '@/services/random';
+import CodeEditor from '@/views/components/common/CodeEditor.vue';
+import { ChevronLeftDoubleIcon, } from 'tdesign-icons-vue-next';
+
+const props = defineProps<{
+  pen: any;
+}>();
+
+const changeValue = (prop: string) => {
+  updatePen(props.pen, prop);
+  // selections.pen[prop] = getter(props.pen, prop);
+  if (prop === 'iframe') {
+    getThumbImg();
+  }
+  if (prop === 'apiEnable') {
+    meta2d.penNetwork(props.pen);
+    meta2d.connectNetwork();
+  }
+};
+
+const getThumbImg = async () => {
+  //改iframe地址后
+  let arr = props.pen.iframe.split('?');
+  let id = queryURLParams(arr[1]).id;
+  if (!id) {
+    return;
+  }
+  // let projection = {
+  //   image: 1,
+  //   _id: 1,
+  //   name: 1,
+  // };
+  let projection = 'image,id,name';
+  let res: any;
+  if (
+    arr[0].indexOf('2d.le5le') !== -1 ||
+    arr[0].indexOf('le5le.com/2d') !== -1
+  ) {
+    res = await getLe5le2d(id, projection);
+  } else if (
+    arr[0].indexOf('v.le5le') !== -1 ||
+    arr[0].indexOf('le5le.com/v') !== -1
+  ) {
+    res = await getLe5leV(id, projection);
+  } else if (
+    arr[0].indexOf('3d.le5le') !== -1 ||
+    arr[0].indexOf('le5le.com/3d') !== -1
+  ) {
+    res = await getLe5le3d(id, projection);
+  }
+  if (res) {
+    props.pen.thumbImg = res.image;
+    props.pen.calculative && (props.pen.calculative.img = null);
+  }
+  props.pen.onRenderPenRaw?.(props.pen);
+};
+
+const drawer = reactive<any>({
+  visible: false,
+});
+
+const showDrawer = (item: any) => {
+  drawer.key = item.key;
+  drawer.header = `${item.label}(${item.key})`;
+  drawer.value = deepClone(props.pen[item.key]);
+  drawer.placeholder = item.placeholder;
+  drawer.randomkey = s8(); //props.pen.id;
+  drawer.visible = true;
+};
+
+const onConfirmDrawer = () => {
+  if (!drawer.value) {
+    MessagePlugin.error('数据不满足json格式');
+    return;
+  }
+  props.pen[drawer.key] = drawer.value;
+  updatePen(props.pen, drawer.key);
+};
+</script>
+<style lang="postcss" scoped></style>

src/views/components/Data.vue

@@ -620,7 +620,7 @@
         <t-button @click="onOkNetwork">确定</t-button>
       </div>
     </template>
-    <div style="height: 300px; padding: 8px; overflow-y: auto">
+    <div style="max-height: 450px; padding: 8px; overflow-y: auto">
       <Network v-model="networkDialog.network" />
     </div>
   </t-dialog>

src/views/components/PenDatas.vue

@@ -60,7 +60,7 @@
           </div>
         </t-space>
       </t-collapse-panel> -->
-      <t-collapse-panel v-if="props.pen.props.custom" value="2" header="属性">
+      <!-- <t-collapse-panel v-if="props.pen.props.custom" value="2" header="属性">
         <t-space direction="vertical" size="small" class="w-full">
           <div v-for="item in props.pen.props.custom" class="form-item">
             <label :title="item.label">{{ item.label }}</label>
@@ -104,16 +104,6 @@
               @change="changeValue(item.key)"
               :placeholder="item.placeholder"
             />
-            <!-- <t-button
-              class="ml-8"
-              v-else-if="item.type === 'code'"
-              shape="square"
-              variant="outline"
-              style="width: 24px"
-              @click="showPropsEdit(item)"
-            >
-              <ellipsis-icon slot="icon"/>
-            </t-button> -->
             <t-button
               class="ml-8"
               v-else-if="item.type === 'code'"
@@ -148,7 +138,7 @@
             />
           </div>
         </t-space>
-      </t-collapse-panel>
+      </t-collapse-panel> -->
 
       <t-collapse-panel value="3" header="数据">
         <div class="t-space-item">
@@ -382,7 +372,7 @@
       </t-collapse-panel>
     </t-collapse>
   </div>
-  <t-drawer 
+  <!-- <t-drawer 
     v-model:visible="drawer.visible" 
     :header="drawer.header" 
     cancelBtn="关闭"
@@ -403,7 +393,7 @@
     <div class="gray" style="font-size: 12px">
       {{ drawer.placeholder }}
     </div>
-    </t-drawer>
+    </t-drawer> -->
   <t-dialog
     v-if="addDataDialog.show"
     :visible="true"

src/views/components/PenProps.vue

@@ -659,6 +659,9 @@
                 </div>
               </t-space>
             </t-collapse-panel>
+            <t-collapse-panel v-if="data.pen.props.custom" value="5" header="属性">
+              <Custom :pen="data.pen"/>
+            </t-collapse-panel>
             <t-collapse-panel
               v-if="data.pen.props.text"
               value="2"
@@ -1424,7 +1427,8 @@ import Iconfonts from './common/Iconfonts.vue';
 import PenAnimates from './PenAnimates.vue';
 import PenDatas from './PenDatas.vue';
 import PenEvents from './PenEvents.vue';
-import PenStatus from './PenStatus.vue'
+import PenStatus from './PenStatus.vue';
+import Custom from './Custom.vue';
 // import ElementTree from './ElementTree.vue';
 
 import { getCookie } from '@/services/cookie';
@@ -1443,7 +1447,10 @@ const { user } = useUser();
 const headers = {
   Authorization: 'Bearer ' + (getCookie('token') || ''),
 };
-const updataData = { directory: '/大屏/图片/默认' };
+const updataData = { 
+  directory: '/大屏/图片/默认' ,
+  conflict:'new'
+};
 
 const uploadRef = ref();
 
@@ -1539,11 +1546,21 @@ function initPenData() {
   if (!data.pen.dash) {
     data.pen.dash = 0;
   }
+  if(data.pen.props?.custom?.length && !data.pen.props?.look){
+    data.pen.props.look = false;
+  }
   if (!data.pen.props.text) {
     if (data.pen.text || data.pen.name === 'text') {
       data.pen.props.text = true;
     }
   }
+  if(['tablePlus','notification','menuDom','radio','checkbox','thermometer','thermometer1'].includes(data.pen.name)){
+    data.pen.props.look = true;
+    data.pen.props.text = true;
+  }
+  if(['indicatorLight','battery'].includes(data.pen.name)||data.pen.name.endsWith('Switch')){
+    data.pen.props.look = true;
+  }
   if (!data.pen.props.image) {
     if (data.pen.image) {
       data.pen.props.image = true;