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

src/services/common.ts

@@ -372,18 +372,18 @@ const tree = reactive({
 });
 
 export const getPenTree = () => {
-  if (tree.patch) {
-    tree.patch = false;
-    const list = [];
-    for (const item of meta2d.store.data.pens) {
-      if (item.parentId) {
-        continue;
-      }
-      const elem = calcElem(item);
-      elem && list.push(elem);
+  // if (tree.patch) {
+  tree.patch = false;
+  const list = [];
+  for (const item of meta2d.store.data.pens) {
+    if (item.parentId) {
+      continue;
     }
-    tree.list = list;
+    const elem = calcElem(item);
+    elem && list.push(elem);
   }
+  tree.list = list;
+  // }
 
   return tree.list;
 };

src/services/echarts.ts

@@ -62,8 +62,13 @@ export const charts = [
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
+              key: 'echarts.option.series.0.data.0',
+              label: '一月数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '二月数据',
               type: 'object',
             },
             {
@@ -143,6 +148,64 @@ export const charts = [
           ],
         },
       },
+      {
+        name: '时间动态数据折线图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 40,
+                left: 40,
+                right: 20,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  type: 'line',
+                  data: [40, 20, 90, 60, 70, 80],
+                },
+              ],
+            },
+            replaceMode: 0,
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option.series.0.data',
+              label: '实时数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.max',
+              label: '最大数量',
+              type: 'number',
+            },
+            {
+              key: 'echarts.replaceMode',
+              label: '模式',
+              type: 'number',
+            },
+          ],
+        },
+      },
     ],
   },
   {

src/views/components/PenDatas.vue

@@ -125,6 +125,7 @@
       <t-input
         v-model="addDataDialog.data.key"
         placeholder="关键字"
+        @blur="onKeyBlur"
         :disabled="!!addDataDialog.data.keywords"
       />
     </div>
@@ -136,7 +137,7 @@
         v-model="addDataDialog.data.type"
         placeholder="字符串"
         :disabled="!!addDataDialog.data.keywords"
-        @change="addDataDialog.data.value = null"
+        @change="onKeyBlur"
       />
     </div>
     <div class="form-item mt-16">
@@ -428,6 +429,7 @@ import axios from 'axios';
 import { debounce } from '@/services/debouce';
 import { getPenTree, typeOptions } from '@/services/common';
 import { updatePen } from './pen';
+import { getter, setter } from '@meta2d/core/src/utils/object';
 
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import Actions from './Actions.vue';
@@ -621,6 +623,17 @@ const addRealTime = (e: any) => {
   addDataDialog.show = true;
 };
 
+const onKeyBlur = () => {
+  if (addDataDialog.data) {
+    let value = getter(props.pen, addDataDialog.data.key);
+    if (value) {
+      setter(addDataDialog.data, 'value', value);
+    } else {
+      addDataDialog.data.value = null;
+    }
+  }
+};
+
 const onChangeLabel = () => {
   if (!addDataDialog.data.key) {
     addDataDialog.data.key = addDataDialog.data.label;
@@ -648,6 +661,7 @@ const onConfirmData = () => {
   }
 
   meta2d.penMock(props.pen);
+  meta2d.render();
 
   addDataDialog.show = false;
 };
@@ -656,6 +670,7 @@ const onMenuMore = (e: any, item: any, i: number) => {
   switch (e.value) {
     case 'edit':
       addDataDialog.header = '编辑动态数据';
+      setter(item, 'value', getter(props.pen, item.key));
       addDataDialog.data = item;
       addDataDialog.show = true;
       break;
@@ -735,6 +750,8 @@ const onSelectBindsChange = (value: string[], options: any) => {
 
     dataBindDialog.selectedIds = value;
     dataBindDialog.data.binds = toRaw(options.selectedRowData[0]);
+    doBindInit();
+    //
   } else if (options.type === 'uncheck') {
     // if (options.currentRowKey === 'CHECK_ALL_BOX') {
     //   for (const data of dataBindDialog.dataSet) {
@@ -758,6 +775,25 @@ const onSelectBindsChange = (value: string[], options: any) => {
   }
 };
 
+const doBindInit = () => {
+  let { key } = dataBindDialog.data;
+  if (props.pen.name === 'echarts' && key.includes('echarts.option.series')) {
+    const { replaceMode } = props.pen.echarts;
+    const { xAxis } = props.pen.echarts.option;
+
+    let beforeV = getter(props.pen, key);
+    if (Array.isArray(beforeV) && replaceMode === 0) {
+      //追加
+      setter(props.pen, key, []);
+      let _key = 'echarts.option.xAxis.data';
+      if (Array.isArray(xAxis) && xAxis.length) {
+        _key = 'echarts.option.xAxis.0.data';
+      }
+      setter(props.pen, _key, []);
+    }
+  }
+};
+
 const dataBindonConfirm = () => {
   dataBindDialog.show = false;
   meta2d.initBinds();