data props

src/styles/app.css

@@ -214,6 +214,10 @@ a.hover:hover {
   flex: 1;
 }
 
+.grid {
+  display: grid;
+}
+
 .center {
   text-align: center;
 }
@@ -270,6 +274,11 @@ a.hover:hover {
   padding-right: 12px;
 }
 
+.py-12 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 .px-16 {
   padding-left: 16px;
   padding-right: 16px;
@@ -280,6 +289,15 @@ a.hover:hover {
   padding-bottom: 16px;
 }
 
+.px-16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.p-16 {
+  padding: 16px;
+}
+
 .transparent {
   background-color: transparent;
   background-image: linear-gradient(

src/styles/tdesign.css

@@ -90,7 +90,7 @@
 }
 
 .t-dropdown__menu {
-  padding: 10px 4px;
+  padding: 4px;
   background-color: var(--color-background-popup);
   border: none;
 
@@ -411,7 +411,7 @@
   }
 }
 
-.t-popup[data-popper-placement^="top"] .t-popup__arrow::before {
+.t-popup[data-popper-placement^='top'] .t-popup__arrow::before {
   top: -4px;
 }
 

src/views/components/PenAnimates.vue

@@ -85,7 +85,7 @@
                 v-model="item.animateLineWidth"
                 theme="column"
                 :min="1"
-                placeholder="同连线宽度"
+                placeholder="默认"
               />
             </div>
             <div class="form-item mt-8">

src/views/components/PenDatas.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="props">
+    <div class="grid px-16 py-12" v-if="pen.realTimes">
+      <div class="title">数据名称</div>
+      <div class="title">值</div>
+      <div>
+        <t-dropdown
+          :options="options"
+          @click="addRealTime(i, $event)"
+          :minColumnWidth="150"
+        >
+          <t-icon name="add-circle" class="hover ml-4" />
+        </t-dropdown>
+      </div>
+      <template v-for="item in pen.realTimes"> </template>
+    </div>
+    <div class="flex column center blank" v-else>
+      <img src="/img/blank.png" />
+      <div class="gray center">还没有动态数据</div>
+      <div class="mt-8">
+        <t-dropdown
+          :options="options"
+          @click="addRealTime(i, $event)"
+          :minColumnWidth="150"
+          trigger="click"
+        >
+          <t-button style="height: 30px"> 添加动态数据 </t-button>
+        </t-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+
+const { pen } = defineProps<{
+  pen: any;
+}>();
+
+const options: any[] = ref([
+  {
+    value: 'x',
+    content: 'X坐标',
+    type: 'number',
+  },
+  {
+    value: 'y',
+    content: 'Y坐标',
+    type: 'number',
+  },
+  {
+    value: 'width',
+    content: '宽',
+    type: 'number',
+  },
+  {
+    value: 'height',
+    content: '高',
+    type: 'number',
+  },
+  {
+    value: 'visible',
+    content: '显示',
+    type: 'bool',
+  },
+  {
+    value: 'text',
+    content: '文字',
+  },
+  {
+    value: 'progress',
+    content: '进度',
+  },
+  {
+    value: 'showChild',
+    content: '状态',
+  },
+  {
+    value: 'rotate',
+    content: '旋转',
+    type: 'number',
+    divider: true,
+  },
+]);
+
+onBeforeMount(() => {
+  if (pen.realTimesOptions) {
+    options.value.push(...pen.realTimesOptions);
+  }
+  options.value[options.value.length - 1].divider = true;
+  options.value.push({ content: '自定义', value: '' });
+});
+
+const addRealTime = () => {
+  if (!pen.realTimes) {
+    pen.realTimes = [];
+  }
+
+  pen.realTimes.push({});
+};
+</script>
+<style lang="postcss" scoped>
+.props {
+  height: 100%;
+
+  .grid {
+    grid-template-columns: 1fr 1fr 30px;
+  }
+
+  .blank {
+    height: 70%;
+    img {
+      padding: 16px;
+      opacity: 0.9;
+    }
+  }
+}
+</style>

src/views/components/PenProps.vue

@@ -943,25 +943,28 @@
       <t-tab-panel :value="2" label="动画">
         <PenAnimates :pen="data.pen" />
       </t-tab-panel>
-      <t-tab-panel :value="3" label="数据"> </t-tab-panel>
+      <t-tab-panel :value="3" label="数据">
+        <PenDatas :pen="data.pen" />
+      </t-tab-panel>
       <t-tab-panel :value="4" label="交互"> </t-tab-panel>
     </t-tabs>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onUnmounted, reactive, ref } from "vue";
-import { getCookie } from "@/services/cookie";
-import { useSelection } from "@/services/selections";
-import MonacoModal from "./common/MonacoModal.vue";
-import { monacoOption } from "./common/MonacoModal.vue";
+import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
+import { getCookie } from '@/services/cookie';
+import { useSelection } from '@/services/selections';
+import MonacoModal from './common/MonacoModal.vue';
+import { monacoOption } from './common/MonacoModal.vue';
 
 import PenAnimates from './PenAnimates.vue';
+import PenDatas from './PenDatas.vue';
 
 const headers = {
-  Authorization: "Bearer " + (localStorage.token || getCookie("token") || ""),
+  Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
 };
-const updataData = { directory: "/项目" };
+const updataData = { directory: '/项目' };
 
 const uploadRef = ref();
 
@@ -972,23 +975,23 @@ const data = reactive<any>({
 });
 
 const fonts = [
-  "新宋体",
-  "微软雅黑",
-  "黑体",
-  "楷体",
-  "-apple-system",
-  "BlinkMacSystemFont",
-  "PingFang SC",
-  "Hiragino Sans GB",
-  "Microsoft YaHei UI",
-  "Microsoft YaHei",
-  "fangsong",
-  "Source Han Sans CN",
-  "sans-serif",
-  "serif",
-  "Apple Color Emoji",
-  "Segoe UI Emoji",
-  "Segoe UI Symbol",
+  '新宋体',
+  '微软雅黑',
+  '黑体',
+  '楷体',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  'PingFang SC',
+  'Hiragino Sans GB',
+  'Microsoft YaHei UI',
+  'Microsoft YaHei',
+  'fangsong',
+  'Source Han Sans CN',
+  'sans-serif',
+  'serif',
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol',
 ];
 
 const { selections } = useSelection();
@@ -1011,12 +1014,12 @@ onBeforeMount(() => {
     data.pen.dash = 0;
   }
   if (!data.pen.props.text) {
-    if (data.pen.text || data.pen.name === "text") {
+    if (data.pen.text || data.pen.name === 'text') {
       data.pen.props.text = true;
     }
   }
   if (!data.pen.props.image) {
-    if (data.pen.image || data.pen.name === "image") {
+    if (data.pen.image || data.pen.name === 'image') {
       data.pen.props.image = true;
     }
   }
@@ -1036,27 +1039,27 @@ onBeforeMount(() => {
 
   // 测试代码
   data.pen.props.custom = [
-    { label: "数字", key: "a", type: "number", placeholder: "输入提示" },
-    { label: "文本", key: "b" },
-    { label: "布尔", key: "c", type: "bool", placeholder: "输入提示" },
-    { label: "颜色", key: "d", type: "color", placeholder: "输入提示" },
+    { label: '数字', key: 'a', type: 'number', placeholder: '输入提示' },
+    { label: '文本', key: 'b' },
+    { label: '布尔', key: 'c', type: 'bool', placeholder: '输入提示' },
+    { label: '颜色', key: 'd', type: 'color', placeholder: '输入提示' },
     {
-      label: "下拉框",
-      key: "d",
-      type: "select",
+      label: '下拉框',
+      key: 'd',
+      type: 'select',
       options: [
-        { label: "选项1", value: "1" },
-        { label: "选项2", value: "2" },
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
       ],
-      placeholder: "输入提示",
+      placeholder: '输入提示',
     },
   ];
   // end
   data.pen.shadow = !!data.pen.shadowColor;
   getRect();
-  meta2d.on("translatePens", getRect);
-  meta2d.on("resizePens", getRect);
-  meta2d.on("rotatePens", getRect);
+  meta2d.on('translatePens', getRect);
+  meta2d.on('resizePens', getRect);
+  meta2d.on('rotatePens', getRect);
 });
 
 const getRect = () => {
@@ -1077,25 +1080,25 @@ const decimalRound = (val: number) => {
 const changeValue = (prop: string) => {
   const v: any = { id: data.pen.id };
   v[prop] = data.pen[prop];
-  if (prop === "x") {
+  if (prop === 'x') {
     v.x = data.rect.x;
-  } else if (prop === "y") {
+  } else if (prop === 'y') {
     v.y = data.rect.y;
-  } else if (prop === "width") {
+  } else if (prop === 'width') {
     v.height = (data.rect.width / data.pen.width) * data.pen.height;
-  } else if (prop === "height") {
+  } else if (prop === 'height') {
     v.width = (data.rect.height / data.pen.height) * data.pen.width;
-  } else if (prop === "shadow") {
+  } else if (prop === 'shadow') {
     if (v[prop]) {
       !v.shadowOffsetX && (v.shadowOffsetX = 0);
       !v.shadowOffsetY && (v.shadowOffsetY = 0);
       !v.shadowBlur && (v.shadowBlur = 0);
     } else {
-      v.shadowColor = "";
+      v.shadowColor = '';
     }
-  } else if (prop === "lineGradientColors") {
+  } else if (prop === 'lineGradientColors') {
     //@ts-ignore
-    if (meta2d.store.active[0].name === "line") {
+    if (meta2d.store.active[0].name === 'line') {
       //@ts-ignore
       meta2d.store.active[0].calculative.gradientColorStop = null;
     } else {
@@ -1103,7 +1106,7 @@ const changeValue = (prop: string) => {
       meta2d.store.active[0].calculative.lineGradient = null;
     }
     //不同模式切换不同的系统配色
-  } else if (prop === "titleFnJs") {
+  } else if (prop === 'titleFnJs') {
     v.titleFn = null;
   }
   meta2d.setValue(v);
@@ -1116,7 +1119,7 @@ const onFontPopupVisible = (val: boolean) => {
 const onFontFamily = (fontFamily: string) => {
   data.pen.fontFamily = fontFamily;
   data.fontFamilyPopupVisible = false;
-  changeValue("fontFamily");
+  changeValue('fontFamily');
 };
 
 const fileSuccessed = async (content: any) => {
@@ -1127,7 +1130,7 @@ const fileSuccessed = async (content: any) => {
 };
 
 const fileRemoved = () => {
-  meta2d.setBackgroundImage("");
+  meta2d.setBackgroundImage('');
   meta2d.store.patchFlagsBackground = true;
   meta2d.render();
   data.background = [];
@@ -1143,22 +1146,22 @@ const onSelectTag = (tag: string) => {
     return;
   }
   data.pen.tags.push(tag);
-  changeValue("tags");
+  changeValue('tags');
 };
 
 const onChangeInputTag = (currentTags: any, context: any) => {
   const { trigger, index, item } = context;
-  if (["tag-remove", "backspace"].includes(trigger)) {
+  if (['tag-remove', 'backspace'].includes(trigger)) {
     data.pen.tags.splice(index, 1);
   }
-  if (trigger === "enter") {
+  if (trigger === 'enter') {
     onSelectTag(item);
     const d = meta2d.store.data as any;
     if (!d.groups.includes(item)) {
       d.groups.push(item);
       data.groups = d.groups;
     }
-    data.inputTag = "";
+    data.inputTag = '';
   }
   data.tagPopupVisible = false;
 };
@@ -1166,42 +1169,42 @@ const onChangeInputTag = (currentTags: any, context: any) => {
 const titleVisible = ref(false);
 const titleOptions: monacoOption[] = [
   {
-    key: "title",
+    key: 'title',
     value: 0,
-    name: "文本",
-    tip: "支持markdown",
-    code: "",
-    language: "markdown",
+    name: '文本',
+    tip: '支持markdown',
+    code: '',
+    language: 'markdown',
   },
   {
-    key: "titleFnJs",
+    key: 'titleFnJs',
     value: 1,
-    name: "高级",
-    tip: "mark函数",
-    code: "",
-    language: "javascript",
-    example:'//例如： return `${pen.name}<br/>${pen.text}`;'
+    name: '高级',
+    tip: 'mark函数',
+    code: '',
+    language: 'javascript',
+    example: '//例如： return `${pen.name}<br/>${pen.text}`;',
   },
 ];
 
 const showTitle = () => {
   titleOptions.forEach((item) => {
-    item.code = data.pen[item.key] || "";
+    item.code = data.pen[item.key] || '';
   });
   titleVisible.value = true;
 };
 
 const changeTitleCode = (options: monacoOption[]) => {
   options.forEach((item) => {
-    data.pen[item.key] = item.code || "";
+    data.pen[item.key] = item.code || '';
     changeValue(item.key);
   });
 };
 
 onUnmounted(() => {
-  meta2d.off("translatePens", getRect);
-  meta2d.off("resizePens", getRect);
-  meta2d.off("rotatePens", getRect);
+  meta2d.off('translatePens', getRect);
+  meta2d.off('resizePens', getRect);
+  meta2d.off('rotatePens', getRect);
 });
 </script>
 <style lang="postcss" scoped>