feat_view&Header

src/services/common.ts

@@ -211,7 +211,7 @@ export const save = async (
       query: {
         id: data._id,
         r: Date.now() + '',
-        component: data.component + '',
+        c: data.component ? 1 : undefined,
       },
     });
   }
@@ -329,7 +329,7 @@ export const onScaleWindow = () => {
   meta2d.fitSizeView(true, 32);
 };
 
-export const onScaleView = () => {
+export const onScaleFull = () => {
   meta2d.scale(1);
   // meta2d.centerView();
   const { x, y, origin, center } = meta2d.store.data;

src/services/debouce.ts

@@ -1,7 +1,7 @@
 const debounces = new WeakMap();
 const throttles = new WeakMap();
 
-export function debounce(fn: Function, delay: number) {
+export function debounce(fn: Function, delay: number, params?: any) {
   let cache: any = debounces.get(fn);
   if (cache) {
     clearTimeout(cache.timer);
@@ -11,13 +11,13 @@ export function debounce(fn: Function, delay: number) {
   }
   return new Promise((resolve, reject) => {
     cache.timer = setTimeout(async () => {
-      resolve(await fn());
+      resolve(await fn(params));
       debounces.delete(fn);
     }, delay);
   });
 }
 
-export async function throttle(fn: Function, delay: number) {
+export async function throttle(fn: Function, delay: number, params?: any) {
   const now = new Date().getTime();
   const start: number = debounces.get(fn);
   throttles.set(fn, now);
@@ -25,5 +25,5 @@ export async function throttle(fn: Function, delay: number) {
     return;
   }
 
-  return await fn();
+  return await fn(params);
 }

src/views/components/Header.vue

@@ -154,7 +154,7 @@
           <a @click="onScaleDown">缩小</a>
         </t-dropdown-item>
         <t-dropdown-item divider="true">
-          <a @click="onScaleView">100%视图</a>
+          <a @click="onScaleFull">100%视图</a>
         </t-dropdown-item>
         <t-dropdown-item>
           <a @click="showMap">
@@ -317,7 +317,7 @@ import {
   blank,
   newFile,
   SaveType,
-  onScaleView,
+  onScaleFull,
   onScaleWindow,
   showMagnifier,
   showMap,

src/views/components/View.vue

@@ -210,7 +210,7 @@
       </t-tooltip>
 
       <t-tooltip content="100%视图" placement="bottom">
-        <a @click="onScaleView"><t-icon name="refresh" /></a>
+        <a @click="onScaleFull"><t-icon name="refresh" /></a>
       </t-tooltip>
       <t-tooltip content="窗口大小" placement="bottom">
         <a @click="onScaleWindow"><t-icon name="fullscreen-exit" /></a>
@@ -285,7 +285,7 @@
       :visible="true"
       @close="dataDialog.show = false"
     >
-      <t-tabs :default-value="1" class="body">
+      <t-tabs v-model="dataDialog.tab" class="body">
         <t-tab-panel :value="1" label="数据订阅" :destroy-on-hide="false">
           <template #panel>
             <div v-if="!dataDialog.editNetwork">
@@ -293,7 +293,7 @@
                 <t-space :size="12">
                   <t-select-input
                     v-model:inputValue="dataDialog.input"
-                    placeholder="搜索我的数据源"
+                    placeholder="搜索我的数据订阅"
                     allow-input
                     clearable
                     :popup-visible="dataDialog.popupVisible"
@@ -387,28 +387,9 @@
           </template>
         </t-tab-panel>
         <t-tab-panel :value="2" :destroy-on-hide="false">
-          <template #label>
-            数据集
-            <span><label class="vip-label ml-4">VIP</label></span>
-          </template>
+          <template #label> 数据集 </template>
           <template #panel>
-            <div class="form-item mt-20">
-              <label style="width: 100px">
-                网络地址
-                <t-tooltip
-                  content="使用网络数据代替自定义数据。高优先级，生产环境使用"
-                >
-                  <t-icon
-                    name="help-circle"
-                    class="ml-4 hover"
-                    style="margin-top: -2px"
-                  />
-                </t-tooltip>
-              </label>
-              <div class="w-full">
-                <t-input v-model="dataDialog.datasetUrl" />
-              </div>
-            </div>
+            <!--
             <div class="form-item" style="margin-top: 28px">
               <label style="width: 100px">
                 自定义
@@ -428,6 +409,23 @@
                 <div class="flex-grow"></div>
                 <a class="mt-4" @click="showAddData()"> + 添加数据 </a>
               </div>
+            </div> -->
+
+            <div class="form-item mt-16">
+              <label style="width: 100px"> 当前数据集 </label>
+              <div class="flex">
+                <t-select
+                  v-model="dataDialog.dataset"
+                  filterable
+                  placeholder="选择数据集"
+                  :on-search="onInputDatasets"
+                  :options="dataDialog.datasetList"
+                />
+                <t-button style="height: 30px" @click="addNetwork">
+                  添加数据集
+                </t-button>
+                <t-button @click="importDataset">从Excel导入</t-button>
+              </div>
             </div>
 
             <t-table
@@ -463,10 +461,23 @@
       </t-tabs>
 
       <template #footer>
-        <div v-if="dataDialog.editNetwork" class="flex middle">
+        <div
+          v-if="dataDialog.tab === 1 && dataDialog.editNetwork"
+          class="flex middle"
+        >
           <div class="flex-grow"></div>
           <t-checkbox v-model="dataDialog.save">
-            同时保存到我的数据源
+            同时保存到我的数据订阅
+          </t-checkbox>
+          <t-button class="ml-16" @click="onOkNetwork">确定</t-button>
+        </div>
+        <div
+          v-else-if="dataDialog.tab === 2 && dataDialog.editNetwork"
+          class="flex middle"
+        >
+          <div class="flex-grow"></div>
+          <t-checkbox v-model="dataDialog.save">
+            同时保存到我的数据订阅
           </t-checkbox>
           <t-button class="ml-16" @click="onOkNetwork">确定</t-button>
         </div>
@@ -734,7 +745,7 @@ import {
   autoSave,
   newFile,
   SaveType,
-  onScaleView,
+  onScaleFull,
   onScaleWindow,
   useDot,
   typeOptions,
@@ -792,7 +803,7 @@ onMounted(() => {
   open(true);
   meta2d.on('active', active);
   meta2d.on('inactive', inactive);
-  meta2d.on('scale', scaleListener);
+  meta2d.on('scale', scaleSubscriber);
   meta2d.on('add', lineAdd);
   meta2d.on('opened', openedListener);
 
@@ -886,20 +897,6 @@ onUnmounted(() => {
   clearInterval(timer);
   watcher();
   if (meta2d) {
-    meta2d.off('active', active);
-    meta2d.off('inactive', inactive);
-    meta2d.off('scale', scaleListener);
-    meta2d.off('add', lineAdd);
-    meta2d.on('opened', openedListener);
-    meta2d.off('undo', patchFlag);
-    meta2d.off('redo', patchFlag);
-    meta2d.off('add', patchFlag);
-    meta2d.off('delete', patchFlag);
-    meta2d.off('rotatePens', patchFlag);
-    meta2d.off('translatePens', patchFlag);
-    meta2d.off('components-update-value', patchFlag);
-    meta2d.off('contextmenu', onContextmenu);
-    meta2d.off('click', canvasClick);
     meta2d.destroy();
   }
 });
@@ -945,11 +942,13 @@ const clearFormat = () => {
 };
 
 const scale = ref(100);
-function scaleListener(newScale: number) {
-  scale.value = Math.round(newScale * 100);
-}
+const scaleSubscriber = (val: number) => {
+  scale.value = Math.round(val * 100);
+};
 
-const dataDialog = reactive<any>({});
+const dataDialog = reactive<any>({
+  tab: 1,
+});
 
 const currentLineType = ref('curve');
 const lineTypes = reactive([
@@ -1221,14 +1220,14 @@ const onShowDataDialog = () => {
   dataDialog.input = '';
   dataDialog.networks = meta2d.store.data.networks || [];
   // @ts-ignore
-  dataDialog.datasetUrl = meta2d.store.data.datasetUrl;
-  // @ts-ignore
   dataDialog.dataset = meta2d.store.data.dataset;
   dataDialog.networkList = [];
+  dataDialog.datasetList = [];
   dataDialog.editNetwork = false;
   dataDialog.save = true;
   dataDialog.show = true;
   getNetworks();
+  getDatasets();
 };
 
 const onSelectNetWork = (item: any) => {
@@ -1236,16 +1235,19 @@ const onSelectNetWork = (item: any) => {
   dataDialog.popupVisible = false;
 };
 
-const onInputNetwork = (text: string) => {
+const onInputNetwork = () => {
   debounce(getNetworks, 300);
 };
 
-// 请求我的数据源接口
+// 请求我的数据订阅
 const getNetworks = async () => {
   const ret: any = await axios.post(`/api/data/datasources/list`, {
     q: {
       name: dataDialog.input,
     },
+    query: {
+      type: 'subscribe',
+    },
     projection: { updatedAt: 0 },
   });
   if (ret) {
@@ -1253,6 +1255,27 @@ const getNetworks = async () => {
   }
 };
 
+const onInputDatasets = (name: string) => {
+  debounce(getDatasets, 300, name);
+};
+
+// 请求我的数据集
+const getDatasets = async (name?: string) => {
+  const body: any = {
+    query: {
+      type: 'dataset',
+    },
+    projection: { updatedAt: 0 },
+  };
+  if (name) {
+    body.q = { name };
+  }
+  const ret: any = await axios.post(`/api/data/datasources/list`, body);
+  if (ret) {
+    dataDialog.datasetList = ret.list;
+  }
+};
+
 const addNetwork = () => {
   dataDialog.network = {
     name: '',
@@ -1365,6 +1388,7 @@ const onOkDatasources = () => {
   meta2d.store.data.dataset = dataDialog.dataset;
   // @ts-ignore
   meta2d.store.data.datasetUrl = dataDialog.datasetUrl;
+  setDot(true);
   meta2d.connectNetwork();
   dataDialog.show = false;
 };