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

src/views/components/Dataset.vue

@@ -82,6 +82,31 @@
           @change="addDataDialog.data.value = null"
         />
       </div>
+      <div class="form-item mt-16">
+        <label>值范围</label>
+        <div class="w-full">
+          <t-input v-model="addDataDialog.data.mock" placeholder="值范围" />
+          <h6 class="desc mt-8">值范围说明</h6>
+          <ul class="desc ml-16">
+            <li>
+              <label class="inline" style="width: 80px">固定值：</label>
+              直接填写，例如：10
+            </li>
+            <li>
+              <label class="inline" style="width: 80px">随机值：</label>
+              {值1,值2,...}。例如：{1,2,3,4,5}
+            </li>
+            <li>
+              <label class="inline" style="width: 80px">范围数字：</label>
+              最小值-最大值。例如：0-1.0 或 0-100
+            </li>
+            <li>
+              <label class="inline" style="width: 80px">随机字符串：</label>
+              [长度]。例如：[8]
+            </li>
+          </ul>
+        </div>
+      </div>
     </t-dialog>
   </div>
 </template>
@@ -116,6 +141,11 @@ const datasetColumns = ref([
     title: '类型',
     ellipsis: true,
   },
+  {
+    colKey: 'mock',
+    title: '值范围',
+    ellipsis: true,
+  },
   {
     colKey: 'actions',
     title: '操作',
@@ -158,6 +188,10 @@ const importDataset = async () => {
       header: '类型',
       key: 'type',
     },
+    {
+      header: '值范围',
+      key: 'mock',
+    },
   ];
   const data: any = await importExcel(columns);
   modelValue.data = data;

src/views/components/Header.vue

@@ -142,7 +142,7 @@
       :delay2="[10, 150]"
       overlayClassName="header-dropdown"
     >
-      <a> 工具 </a>
+      <a> 查看 </a>
       <t-dropdown-menu>
         <t-dropdown-item>
           <a @click="onScaleWindow">窗口大小</a>

src/views/components/Network.vue

@@ -2,7 +2,7 @@
   <div class="network-component">
     <div class="form-item mt-8">
       <label>
-        {{ modelValue.type === 'subscribe' ? '数据订阅' : '数据发送' }}
+        {{ modelValue.type === 'subscribe' ? '实时数据' : '数据发送' }}
       </label>
       <t-select-input
         v-if="mode"

src/views/components/PenDatas.vue

@@ -19,34 +19,35 @@
         <div class="value">
           <t-input
             v-if="item.type === 'integer'"
-            v-model.number="pen[item.key]"
+            v-model.number="props.pen[item.key]"
             placeholder="整数"
             @change="changeValue(item.key)"
           />
           <t-input-number
             v-else-if="item.type === 'float'"
-            v-model="pen[item.key]"
+            v-model="props.pen[item.key]"
             placeholder="浮点数"
             theme="normal"
             @change="changeValue(item.key)"
           />
           <t-switch
             v-else-if="item.type === 'bool'"
-            v-model="pen[item.key]"
+            v-model="props.pen[item.key]"
             class="ml-8"
             size="small"
             @change="changeValue(item.key)"
           />
-          <div
+          <t-button
             v-else-if="item.type === 'array' || item.type === 'object'"
-            class="gray ellipsis"
-            style="height: 30px"
+            variant="outline"
+            style="padding: 0px 2px 0 4px; margin: 0 4px"
+            @click="editObject(item)"
           >
-            {{ JSON.stringify(pen[item.key]) }}
-          </div>
+            <t-icon name="ellipsis" />
+          </t-button>
           <t-input
             v-else
-            v-model="pen[item.key]"
+            v-model="props.pen[item.key]"
             placeholder="字符串"
             @change="changeValue(item.key)"
           />
@@ -406,6 +407,23 @@
       </div>
     </div>
   </t-dialog>
+
+  <t-dialog
+    v-if="ojbectDialog.show"
+    :visible="true"
+    header="数据编辑"
+    @confirm="onOkEditOjbect"
+    @close="ojbectDialog.show = false"
+    :width="700"
+  >
+    <div class="py-8">
+      <CodeEditor
+        :json="true"
+        v-model="ojbectDialog.data"
+        style="height: 300px"
+      />
+    </div>
+  </t-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -449,25 +467,25 @@ const options = ref<any>([
   {
     value: 'x',
     content: 'X',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'y',
     content: 'Y',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'width',
     content: '宽',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'height',
     content: '高',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
@@ -484,19 +502,19 @@ const options = ref<any>([
   {
     value: 'progress',
     content: '进度',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'showChild',
     content: '状态',
-    type: 'number',
+    type: 'integer',
     keywords: true,
   },
   {
     value: 'rotate',
     content: '旋转',
-    type: 'number',
+    type: 'integer',
     keywords: true,
   },
 ]);
@@ -522,6 +540,11 @@ const dataBindDialog = reactive<any>({
   data: undefined,
 });
 
+const ojbectDialog = reactive<any>({
+  show: false,
+  data: undefined,
+});
+
 const dataSetColumns = [
   {
     colKey: 'row-select',
@@ -531,13 +554,11 @@ const dataSetColumns = [
   {
     colKey: 'label',
     title: '数据点名称',
-    width: 200,
     ellipsis: { theme: 'light', trigger: 'context-menu' },
   },
   {
     colKey: 'id',
     title: '数据点ID',
-    width: 200,
     ellipsis: { theme: 'light', trigger: 'context-menu' },
   },
   {
@@ -545,6 +566,11 @@ const dataSetColumns = [
     title: '类型',
     width: 100,
   },
+  {
+    colKey: 'mock',
+    title: '值范围',
+    ellipsis: true,
+  },
 ];
 
 const operatorOptions = ref<any>([
@@ -590,7 +616,7 @@ onBeforeMount(() => {
 });
 
 const addRealTime = (e: any) => {
-  if (e.keywords) {
+  if (e.keywords || e.value === 'text') {
     if (!props.pen.realTimes) {
       props.pen.realTimes = [];
     }
@@ -745,6 +771,7 @@ const onSelectBindsChange = (value: string[], options: any) => {
   if (options.type === 'check') {
     dataBindDialog.selectedIds = value;
     dataBindDialog.data.bind = toRaw(options.selectedRowData[0]);
+    dataBindDialog.data.mock = dataBindDialog.data.bind.mock;
     doBindInit();
   } else if (options.type === 'uncheck') {
     dataBindDialog.selectedIds = [];
@@ -888,6 +915,32 @@ const onInput = (item: any) => {
   item.label = item.value;
 };
 
+const editObject = (item: any) => {
+  ojbectDialog.data = props.pen[item.key];
+  ojbectDialog.item = item;
+  ojbectDialog.show = true;
+};
+
+const onOkEditOjbect = () => {
+  if (ojbectDialog.data) {
+    if (
+      ojbectDialog.item.type === 'array' &&
+      !Array.isArray(ojbectDialog.data)
+    ) {
+      MessagePlugin.error('请输入数组格式数据');
+      return;
+    }
+    props.pen[ojbectDialog.item.key] = ojbectDialog.data;
+    props.pen[ojbectDialog.item.key] = updatePen(
+      props.pen,
+      ojbectDialog.item.key
+    );
+    ojbectDialog.show = false;
+  } else {
+    MessagePlugin.error('请输入严格的JSON格式数据');
+  }
+};
+
 onUnmounted(() => {
   clearInterval(timer);
 });
@@ -930,6 +983,7 @@ onUnmounted(() => {
     padding-right: 8px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 
     svg {
       flex-shrink: 0;

src/views/components/View.vue

@@ -286,7 +286,7 @@
       @close="dataDialog.show = false"
     >
       <t-tabs v-model="dataDialog.tab" class="body">
-        <t-tab-panel :value="1" label="数据订阅" :destroy-on-hide="false">
+        <t-tab-panel :value="1" label="实时数据" :destroy-on-hide="false">
           <template #panel>
             <div v-if="!dataDialog.editNetwork">
               <div class="mt-16 flex between middle">
@@ -301,7 +301,7 @@
                 <div>
                   <t-select-input
                     v-model:inputValue="dataDialog.input"
-                    placeholder="搜索我的数据订阅"
+                    placeholder="搜索我的实时数据"
                     allow-input
                     clearable
                     :popup-visible="dataDialog.popupVisible"
@@ -357,7 +357,7 @@
                     style="height: 30px"
                     @click="addNetwork"
                   >
-                    添加数据订阅
+                    添加实时数据
                   </t-button>
                 </div>
               </div>
@@ -380,7 +380,7 @@
                   <div class="center">
                     <div>暂无数据</div>
                     <div class="mt-8">
-                      <a @click="addNetwork"> + 添加数据订阅</a>
+                      <a @click="addNetwork"> + 添加实时数据</a>
                     </div>
                   </div>
                 </template>
@@ -498,7 +498,7 @@
         >
           <div class="flex-grow"></div>
           <t-checkbox v-model="dataDialog.save">
-            同时保存到我的数据订阅
+            同时保存到我的实时数据
           </t-checkbox>
           <t-button @click="onOkNetwork">确定</t-button>
         </div>
@@ -1227,7 +1227,7 @@ const onInputNetwork = () => {
   debounce(getNetworks, 300);
 };
 
-// 请求我的数据订阅
+// 请求我的实时数据
 const getNetworks = async () => {
   const ret: any = await axios.post(
     `/api/data/datasources/list`,
@@ -1372,6 +1372,11 @@ const datasetColumns = ref([
     title: '类型',
     ellipsis: true,
   },
+  {
+    colKey: 'mock',
+    title: '值范围',
+    ellipsis: true,
+  },
 ]);
 
 const addDataset = () => {