data and mock

src/styles/app.css

@@ -146,6 +146,10 @@ a.hover:hover {
   color: var(--color-primary-hover) !important;
 }
 
+.inline {
+  display: inline-block;
+}
+
 .button {
   display: inline-block !important;
   padding: 0 16px;

src/styles/tdesign.css

@@ -64,6 +64,20 @@
   &.t-is-selected {
     background: none;
     color: var(--color);
+    &.t-is-disabled:hover {
+      background: none !important ;
+    }
+  }
+}
+
+.select-options {
+  .t-select-option {
+    height: 100%;
+    padding: 0;
+
+    &:not(.t-is-disabled):not(.t-is-selected):hover {
+      background: none !important ;
+    }
   }
 }
 
@@ -602,14 +616,3 @@
 .t-image__wrapper {
   background: none;
 }
-
-.select-options {
-  .t-select-option {
-    height: 100%;
-    padding: 0;
-
-    &:not(.t-is-disabled):not(.t-is-selected):hover {
-      background: none !important ;
-    }
-  }
-}

src/views/components/Actions.vue

@@ -210,7 +210,7 @@
           </div>
         </template>
         <template v-else-if="a.action == 15">
-          <Network v-model="a.network" type="publish" mode="1" />
+          <Network v-model="a.network" mode="1" />
 
           <div class="form-item mt-8">
             <label>数据对象</label>
@@ -447,7 +447,7 @@ const onChangeAction = (action: any) => {
       action.targetType = 'id';
       break;
     case 15:
-      action.network = { options: {} };
+      action.network = { type: 'publish', protocol: 'mqtt', options: {} };
       action.params = '';
       action.value = {};
       action.targetType = 'id';
@@ -506,7 +506,7 @@ const getProps = (c: any) => {
   } else if (meta2d.store.active) {
     target = meta2d.store.active[0];
   }
-  if (target) {
+  if (target?.realTimes) {
     for (const item of target.realTimes) {
       const found = c.props.findIndex((elem: any) => elem.value === item.key);
       if (found < 0) {

src/views/components/Dataset.vue

@@ -68,7 +68,7 @@
       </div>
       <div class="form-item mt-16">
         <label>数据点ID</label>
-        <t-input v-model="addDataDialog.data.key" placeholder="数据ID" />
+        <t-input v-model="addDataDialog.data.id" placeholder="数据点ID" />
       </div>
       <div class="form-item mt-16">
         <label>类型</label>
@@ -80,68 +80,6 @@
           @change="addDataDialog.data.value = null"
         />
       </div>
-      <div class="form-item mt-16">
-        <label>值</label>
-        <div class="flex-grow" v-if="addDataDialog.data.type === 'integer'">
-          <t-input
-            class="w-full"
-            v-model="addDataDialog.data.value"
-            placeholder="整数"
-          />
-          <div class="desc mt-8">
-            固定数字：直接输入数字。例如：5<br />
-            随机范围数字 ：最小值-最大值。例如：0-1 或 0-100
-            <br />
-            随机指定数字 ：数字1,数字2,数字3... 。 例如：1,5,10,20<br />
-          </div>
-        </div>
-        <div class="flex-grow" v-else-if="addDataDialog.data.type === 'float'">
-          <t-input
-            class="w-full"
-            v-model="addDataDialog.data.value"
-            placeholder="浮点数"
-          />
-          <div class="desc mt-8">
-            固定数字：直接输入数字。例如：5.02<br />
-            随机范围数字 ：最小值-最大值。例如：0-1.0 或 0-100
-            <br />
-            随机指定数字 ：数字1,数字2,数字3... 。 例如：1.03,5.02,10,20.09<br />
-          </div>
-        </div>
-        <div class="flex-grow" v-else-if="addDataDialog.data.type === 'bool'">
-          <t-select v-model="addDataDialog.data.value">
-            <t-option :key="true" :value="true" label="true"></t-option>
-            <t-option :key="false" :value="false" label="false"></t-option>
-            <t-option key="随机" label="随机"></t-option>
-          </t-select>
-          <div class="desc mt-8">
-            固定：指定true或false<br />
-            随机：随机生成一个布尔值<br />
-          </div>
-        </div>
-        <div
-          class="flex-grow"
-          v-else-if="
-            addDataDialog.data.type === 'array' ||
-            addDataDialog.data.type === 'object'
-          "
-        >
-          <CodeEditor v-model="addDataDialog.data.value" :json="true" />
-        </div>
-        <div class="flex-grow" v-else>
-          <t-input
-            class="w-full"
-            v-model="addDataDialog.data.value"
-            placeholder="字符串"
-          />
-          <div class="desc mt-8">
-            固定文字：直接输入。例如：大屏可视化<br />
-            随机文本：[文本长度]。例如：[8] 或 [16]<br />
-            随机指定文本：{文本1,文本2,文本3...} 。 例如：{大屏, 可视化}
-            <br />
-          </div>
-        </div>
-      </div>
     </t-dialog>
   </div>
 </template>
@@ -154,8 +92,6 @@ import { MessagePlugin } from 'tdesign-vue-next';
 import { importExcel } from '@/services/excel';
 import { typeOptions } from '@/services/common';
 
-import CodeEditor from './common/CodeEditor.vue';
-
 const { modelValue } = defineProps<{
   modelValue: any;
 }>();
@@ -169,7 +105,7 @@ const datasetColumns = ref([
     ellipsis: true,
   },
   {
-    colKey: 'key',
+    colKey: 'id',
     title: '数据点ID',
     ellipsis: true,
   },
@@ -178,15 +114,10 @@ const datasetColumns = ref([
     title: '类型',
     ellipsis: true,
   },
-  {
-    colKey: 'value',
-    title: '值',
-    ellipsis: true,
-  },
   {
     colKey: 'actions',
     title: '操作',
-    width: 80,
+    width: 100,
   },
 ]);
 
@@ -219,16 +150,12 @@ const importDataset = async () => {
     },
     {
       header: '数据点ID',
-      key: 'key',
+      key: 'id',
     },
     {
       header: '类型',
       key: 'type',
     },
-    {
-      header: '值',
-      key: 'value',
-    },
   ];
   const data: any = await importExcel(columns);
   modelValue.data = data;

src/views/components/Network.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="network-component">
     <div class="form-item mt-8">
-      <label>{{ type === 'subscribe' ? '数据订阅' : '数据发布' }}</label>
+      <label>
+        {{ modelValue.type === 'subscribe' ? '数据订阅' : '数据发送' }}
+      </label>
       <t-select-input
         v-if="mode"
         v-model:inputValue="modelValue.name"
         :value="modelValue.name"
-        placeholder="名称"
+        placeholder="我的数据发送"
         allow-input
         clearable
         v-model:popup-visible="popupVisible"
@@ -89,7 +91,7 @@
       <div class="form-item mt-8">
         <label>自动生成</label>
         <t-switch
-          class="mt-8"
+          class="mt-8 ml-8"
           v-model="modelValue.options.customClientId"
           size="small"
         />
@@ -110,7 +112,7 @@
     <div class="form-item mt-8" v-if="mode">
       <label> </label>
       <div>
-        <t-button @click="onSave">保存到我的数据源</t-button>
+        <t-button @click="onSave">保存到我的数据发送</t-button>
       </div>
     </div>
   </div>
@@ -123,7 +125,6 @@ import { debounce } from '@/services/debouce';
 
 const { modelValue, mode } = defineProps<{
   modelValue: any;
-  type: string;
   mode?: any;
 }>();
 
@@ -132,7 +133,12 @@ const emit = defineEmits(['update:modelValue', 'change']);
 const popupVisible = ref<boolean>(false);
 const networkList = ref<any[]>([]);
 
-onBeforeMount(() => {});
+onBeforeMount(() => {
+  console.log(123123, mode);
+  if (mode) {
+    getNetworks();
+  }
+});
 
 const protocolChange = (protocol: string) => {
   if (protocol === 'http') {
@@ -183,12 +189,18 @@ const onInput = (text: string) => {
 
 // 请求我的数据源接口
 const getNetworks = async () => {
-  const ret: any = await axios.post(`/api/data/datasources/list`, {
-    q: {
-      name: modelValue.name,
+  const body: any = {
+    query: {
+      type: modelValue.type,
     },
     projection: { updatedAt: 0 },
-  });
+  };
+  if (modelValue.name) {
+    body.q = {
+      name: modelValue.name,
+    };
+  }
+  const ret: any = await axios.post(`/api/data/datasources/list`, body);
   if (ret) {
     networkList.value = ret.list;
   }
@@ -201,6 +213,5 @@ const onSelect = (item: any) => {
 </script>
 <style lang="postcss" scoped>
 .network-component {
-  padding-right: 16px;
 }
 </style>

src/views/components/PenDatas.vue

@@ -55,7 +55,7 @@
             <t-icon
               name="link"
               class="hover ml-4"
-              :class="{ primary: item.binds?.id }"
+              :class="{ primary: item.enableMock || item.bind?.id }"
               @click="onBind(item)"
             />
           </t-tooltip>
@@ -154,48 +154,97 @@
     v-if="dataBindDialog.show"
     :visible="true"
     class="data-link-dialog"
-    header="动态数据绑定"
+    header="动态数据设置"
     @close="dataBindDialog.show = false"
     @confirm="dataBindonConfirm"
+    :top="70"
     :width="700"
   >
-    <div class="form-item">
-      <label>当前绑定：</label>
-      <div class="label" v-if="dataBindDialog.data.binds?.id">
-        <t-tooltip :content="dataBindDialog.data.binds?.id">
-          <t-tag class="mr-8 mb-8" closable @close="onRemoveBind()">
-            {{ dataBindDialog.data.binds?.label }}
-          </t-tag>
-        </t-tooltip>
-      </div>
-      <div class="label gray" v-else>无</div>
-    </div>
-    <div class="form-item mt-8">
-      <t-input
-        placeholder="搜索"
-        v-model="dataBindDialog.input"
-        @change="onSearchDataset"
-        @enter="onSearchDataset"
+    <t-tabs :defaultValue="1">
+      <t-tab-panel
+        :value="1"
+        label="绑定数据点"
+        :destroy-on-hide="false"
+        style="height: 420px"
       >
-        <template #suffixIcon>
-          <t-icon name="search" class="hover" @click="onSearchDataset" />
-        </template>
-      </t-input>
-    </div>
-    <t-table
-      class="mt-12 data-list"
-      row-key="id"
-      :data="dataBindDialog.dataset"
-      :columns="dataSetColumns"
-      size="small"
-      bordered
-      :loading="dataBindDialog.loading"
-      :pagination="query"
-      @page-change="onChangePagination"
-      :selected-row-keys="dataBindDialog.selectedIds"
-      @select-change="onSelectBindsChange"
-    >
-    </t-table>
+        <div class="form-item mt-12">
+          <label>当前绑定：</label>
+          <div class="label" v-if="dataBindDialog.data.bind?.id">
+            <t-tooltip :content="dataBindDialog.data.bind?.id">
+              <t-tag class="mr-8 mb-8" closable @close="onRemoveBind()">
+                {{ dataBindDialog.data.bind?.label }}
+              </t-tag>
+            </t-tooltip>
+          </div>
+          <div class="label gray" v-else>无</div>
+        </div>
+        <div class="form-item mt-8">
+          <t-input
+            placeholder="搜索"
+            v-model="dataBindDialog.input"
+            @change="onSearchDataset"
+            @enter="onSearchDataset"
+          >
+            <template #suffixIcon>
+              <t-icon name="search" class="hover" @click="onSearchDataset" />
+            </template>
+          </t-input>
+        </div>
+        <t-table
+          class="mt-12 data-list"
+          row-key="id"
+          :data="dataBindDialog.dataset"
+          :columns="dataSetColumns"
+          size="small"
+          bordered
+          :loading="dataBindDialog.loading"
+          :pagination="query"
+          @page-change="onChangePagination"
+          :selected-row-keys="dataBindDialog.selectedIds"
+          @select-change="onSelectBindsChange"
+          :max-height="270"
+        >
+        </t-table>
+      </t-tab-panel>
+      <t-tab-panel
+        :value="2"
+        label="数据模拟"
+        :destroy-on-hide="false"
+        style="height: 420px"
+      >
+        <div class="form-item mt-20">
+          <label>模拟值：</label>
+          <t-input v-model="dataBindDialog.data.mock" />
+        </div>
+        <div class="form-item mt-12">
+          <label>开启：</label>
+          <t-switch
+            class="mt-8"
+            size="small"
+            v-model="dataBindDialog.data.enableMock"
+          />
+        </div>
+        <h6 class="desc mt-20">模拟值说明</h6>
+        <ul class="desc mt-4">
+          <li class="mt-4">
+            <label class="inline" style="width: 80px">固定值：</label>
+            直接填写，例如：10
+          </li>
+          <li class="mt-4">
+            <label class="inline" style="width: 80px">随机值：</label>
+            {值1,值2,...}。例如：{1,2,3,4,5}
+          </li>
+          <li class="mt-4">
+            <label class="inline" style="width: 80px">范围数字：</label>
+            最小值-最大值。例如：0-1.0 或 0-100
+          </li>
+          <li class="mt-4">
+            <label class="inline" style="width: 80px">随机字符串：</label>
+            [长度]。例如：[8]
+          </li>
+        </ul>
+      </t-tab-panel>
+    </t-tabs>
   </t-dialog>
 
   <t-dialog
@@ -371,10 +420,11 @@ import {
 import { useRoute, useRouter } from 'vue-router';
 import { MessagePlugin } from 'tdesign-vue-next';
 import axios from 'axios';
+import { getter, setter } from '@meta2d/core/src/utils/object';
 import { debounce } from '@/services/debouce';
 import { getPenTree, typeOptions } from '@/services/common';
+import { searchPinyin } from '@/services/pinyin';
 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';
@@ -481,13 +531,13 @@ const dataSetColumns = [
   {
     colKey: 'label',
     title: '数据点名称',
-    width: 180,
+    width: 200,
     ellipsis: { theme: 'light', trigger: 'context-menu' },
   },
   {
     colKey: 'id',
     title: '数据点ID',
-    width: 180,
+    width: 200,
     ellipsis: { theme: 'light', trigger: 'context-menu' },
   },
   {
@@ -495,11 +545,6 @@ const dataSetColumns = [
     title: '类型',
     width: 100,
   },
-  {
-    colKey: 'value',
-    title: '值',
-    ellipsis: true,
-  },
 ];
 
 const operatorOptions = ref<any>([
@@ -610,9 +655,6 @@ const onConfirmData = () => {
     props.pen.realTimes.push(addDataDialog.data);
   }
 
-  meta2d.penMock(props.pen);
-  meta2d.render();
-
   addDataDialog.show = false;
 };
 
@@ -633,23 +675,11 @@ const onMenuMore = (e: any, item: any, i: number) => {
 };
 
 const onBind = (item: any) => {
-  // if (!item.binds) {
-  //   item.binds = [];
-  // }
-  // dataBindDialog.data = item;
-  // dataBindDialog.input = '';
-  // dataBindDialog.selectedIds = [];
-  // for (const i of item.binds) {
-  //   dataBindDialog.selectedIds.push(i.id);
-  // }
-  // dataBindDialog.bkBinds = [];
-  // dataBindDialog.bkBinds.push(...item.binds);
-  // dataBindDialog.show = true;
   dataBindDialog.data = item;
   dataBindDialog.input = '';
   dataBindDialog.selectedIds = [];
-  if (item.binds && item.binds.id) {
-    dataBindDialog.selectedIds.push(item.binds.id);
+  if (item.bind && item.bind.id) {
+    dataBindDialog.selectedIds.push(item.bind.id);
   }
   dataBindDialog.show = true;
   getDataset();
@@ -669,15 +699,27 @@ const getDataset = async () => {
 
   dataBindDialog.loading = true;
   if (data.dataset.url) {
-    const ret: any = await axios.get(data.dataset.url);
+    const ret: any = await axios.get(data.dataset.url, {
+      params: {
+        q: dataBindDialog.input,
+        current: query.current,
+        pageSize: query.pageSize,
+      },
+    });
     dataBindDialog.dataset = ret;
     query.total = ret.total;
+  } else if (dataBindDialog.input) {
+    dataBindDialog.dataset = data.dataset.data.filter((item: any) => {
+      return (
+        searchPinyin(item.label, dataBindDialog.input) ||
+        item.id.indexOf(dataBindDialog.input) > -1
+      );
+    });
+    query.total = dataBindDialog.dataset.length;
   } else {
     dataBindDialog.dataset = data.dataset.data;
+    query.total = dataBindDialog.dataset.length;
   }
-
-  // 应该从data获取url或结果列表
-
   dataBindDialog.loading = false;
 };
 
@@ -692,55 +734,26 @@ const onChangePagination = (pageInfo: any) => {
 };
 
 const onSelectBindsChange = (value: string[], options: any) => {
-  // dataBindDialog.selectedIds = value;
-
   if (options.type === 'check') {
-    // for (const item of options.selectedRowData) {
-    //   const found = dataBindDialog.data.binds.findIndex((elem: any) => {
-    //     return elem.id === item.id;
-    //   });
-    //   if (found < 0) {
-    //     dataBindDialog.data.binds.push(toRaw(item));
-    //   }
-    // }
-
     dataBindDialog.selectedIds = value;
-    dataBindDialog.data.binds = toRaw(options.selectedRowData[0]);
+    dataBindDialog.data.bind = toRaw(options.selectedRowData[0]);
     doBindInit();
-    //
   } else if (options.type === 'uncheck') {
-    // if (options.currentRowKey === 'CHECK_ALL_BOX') {
-    //   for (const data of dataBindDialog.dataSet) {
-    //     const found = dataBindDialog.data.binds.findIndex((elem: any) => {
-    //       return elem.id === data.id;
-    //     });
-    //     if (found > -1) {
-    //       dataBindDialog.data.binds.splice(found, 1);
-    //     }
-    //   }
-    // } else {
-    //   const found = dataBindDialog.data.binds.findIndex((elem: any) => {
-    //     return elem.id === options.currentRowKey;
-    //   });
-    //   if (found > -1) {
-    //     dataBindDialog.data.binds.splice(found, 1);
-    // }
     dataBindDialog.selectedIds = [];
-    dataBindDialog.data.binds = {};
-    // }
+    dataBindDialog.data.bind = {};
   }
 };
 
 const doBindInit = () => {
-  let { key } = dataBindDialog.data;
-  if (props.pen.name === 'echarts' && key.includes('echarts.option.series')) {
+  let { id } = dataBindDialog.data;
+  if (props.pen.name === 'echarts' && id.includes('echarts.option.series')) {
     const { replaceMode } = props.pen.echarts;
     const { xAxis } = props.pen.echarts.option;
 
-    let beforeV = getter(props.pen, key);
+    let beforeV = getter(props.pen, id);
     if (Array.isArray(beforeV) && replaceMode === 0) {
       //追加
-      setter(props.pen, key, []);
+      setter(props.pen, id, []);
       let _key = 'echarts.option.xAxis.data';
       if (Array.isArray(xAxis) && xAxis.length) {
         _key = 'echarts.option.xAxis.0.data';
@@ -756,27 +769,20 @@ const dataBindonConfirm = () => {
 };
 
 const onRemoveBind = () => {
-  // dataBindDialog.data.binds.splice(index, 1);
-
   dataBindDialog.selectedIds = [];
-  // for (const i of dataBindDialog.data.binds) {
-  //   dataBindDialog.selectedIds.push(i.id);
-  // }
-  dataBindDialog.data.binds = undefined;
+  dataBindDialog.data.bind = undefined;
 };
 
 const getBindsDesc = (item: any) => {
-  if (!item.binds || !item.binds.id) {
-    return '绑定动态数据';
+  if (item.bind?.label) {
+    return item.bind.label;
+  }
+
+  if (item.enableMock && item.mock) {
+    return item.mock;
   }
-  // let desc = '';
-  // for (const i of item.binds) {
-  //   desc += i.label + '，';
-  // }
-  // if (desc && desc.length > 1) {
-  //   desc = desc.substring(0, desc.length - 1);
-  // }
-  return item.binds.label;
+
+  return '动态数据';
 };
 
 const changeValue = (prop: string) => {
@@ -946,8 +952,13 @@ onUnmounted(() => {
   }
 
   .data-list {
-    height: 300px;
-    overflow: auto;
+    :deep(.t-table__header--fixed:not(.t-table__header--multiple) > tr > th) {
+      background: none;
+    }
+
+    :deep(.t-table__pagination) {
+      padding-bottom: 0;
+    }
   }
 }
 

src/views/components/View.vue

@@ -289,8 +289,16 @@
         <t-tab-panel :value="1" label="数据订阅" :destroy-on-hide="false">
           <template #panel>
             <div v-if="!dataDialog.editNetwork">
-              <t-row class="mt-16" justify="end">
-                <t-space :size="12">
+              <div class="mt-16 flex between middle">
+                <div>
+                  <t-checkbox
+                    v-model="dataDialog.enableMock"
+                    @change="onChangeMock"
+                  >
+                    开启模拟数据
+                  </t-checkbox>
+                </div>
+                <div>
                   <t-select-input
                     v-model:inputValue="dataDialog.input"
                     placeholder="搜索我的数据订阅"
@@ -316,6 +324,17 @@
                             <t-icon name="delete" />
                           </span>
                         </li>
+                        <li
+                          v-if="dataDialog.networkList.length >= 10"
+                          style="
+                            line-height: 1.5;
+                            padding: 8px;
+                            border-radius: 2px;
+                          "
+                          :key="-1"
+                        >
+                          <div class="desc">...</div>
+                        </li>
                         <li
                           v-if="!dataDialog.networkList.length"
                           style="
@@ -333,11 +352,15 @@
                       <t-icon name="search" class="hover" />
                     </template>
                   </t-select-input>
-                  <t-button style="height: 30px" @click="addNetwork">
+                  <t-button
+                    class="ml-12"
+                    style="height: 30px"
+                    @click="addNetwork"
+                  >
                     添加数据订阅
                   </t-button>
-                </t-space>
-              </t-row>
+                </div>
+              </div>
               <t-table
                 class="mt-12"
                 row-key="id"
@@ -379,7 +402,7 @@
                 </a>
               </div>
               <div style="height: 300px; overflow-y: auto">
-                <Network v-model="dataDialog.network" type="subscribe" />
+                <Network v-model="dataDialog.network" />
               </div>
             </div>
           </template>
@@ -417,6 +440,12 @@
                         </span>
                       </div>
                     </t-option>
+                    <t-option
+                      v-if="dataDialog.datasetList.length >= 10"
+                      :disabled="true"
+                    >
+                      <div class="ml-8 gray">...</div>
+                    </t-option>
                   </t-select>
 
                   <t-button
@@ -1150,6 +1179,8 @@ const onShowDataDialog = () => {
   dataDialog.networks = meta2d.store.data.networks || [];
   // @ts-ignore
   dataDialog.dataset = meta2d.store.data.dataset || {};
+  // @ts-ignore
+  dataDialog.enableMock = meta2d.store.data.enableMock;
   dataDialog.networkList = [];
   dataDialog.datasetList = [];
   dataDialog.editNetwork = false;
@@ -1159,6 +1190,11 @@ const onShowDataDialog = () => {
   getDatasets();
 };
 
+const onChangeMock = () => {
+  // @ts-ignore
+  meta2d.store.data.enableMock = dataDialog.enableMock;
+};
+
 const onSelectNetWork = (item: any) => {
   dataDialog.networks.push(item);
   dataDialog.popupVisible = false;
@@ -1223,7 +1259,17 @@ const getDatasets = async (name?: string) => {
       pageSize: 10,
     },
   });
-  if (ret) {
+  if (ret?.list) {
+    if (dataDialog.dataset?.id) {
+      const found = ret.list.findIndex(
+        (item: any) =>
+          item._id === dataDialog.dataset.id ||
+          item.id === dataDialog.dataset.id
+      );
+      if (found < 0) {
+        ret.list.push(dataDialog.dataset);
+      }
+    }
     dataDialog.datasetList = ret.list;
   }
 };
@@ -1293,7 +1339,7 @@ const datasetColumns = ref([
     ellipsis: true,
   },
   {
-    colKey: 'key',
+    colKey: 'id',
     title: '数据点ID',
     ellipsis: true,
   },
@@ -1302,11 +1348,6 @@ const datasetColumns = ref([
     title: '类型',
     ellipsis: true,
   },
-  {
-    colKey: 'value',
-    title: '值',
-    ellipsis: true,
-  },
 ]);
 
 const addDataset = () => {