perfect_数据源管理

src/services/excel.ts

@@ -2,42 +2,55 @@ import ExcelJS from "exceljs";
 import { saveAs } from "file-saver";
 import { MessagePlugin } from "tdesign-vue-next";
 
-export function importExcel() {
-  const input = document.createElement("input");
-  input.type = "file";
-  input.accept =
-    ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,application/zip";
-  input.onchange = (event) => {
-    const elem: any = event.target;
+export async function importExcel(columns: any[]) {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept =
+      ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,application/zip";
+    input.onchange = (event) => {
+      const elem: any = event.target;
 
-    if (elem.files && elem.files[0].name.indexOf(".xlsx") > 0) {
-      const workbook = new ExcelJS.Workbook();
-      const reader = new FileReader();
-      reader.readAsArrayBuffer(elem.files[0]);
-      reader.onload = async () => {
-        const buffer: any = reader.result;
-        await workbook.xlsx.load(buffer);
-        // 默认只解析第一个sheet
-        const worksheet = workbook.worksheets[0];
-        // 获取sheet1的所有rows
-        const rows = worksheet.getSheetValues();
-        if (rows.length === 0) {
-          MessagePlugin.warning("导入的excel文件不可为空！");
-          return;
-        }
-        let dataArry = [];
-        worksheet.eachRow((row, rowNumber) => {
-          if (rowNumber === 1) {
+      if (elem.files && elem.files[0].name.indexOf(".xlsx") > 0) {
+        const workbook = new ExcelJS.Workbook();
+        const reader = new FileReader();
+        reader.readAsArrayBuffer(elem.files[0]);
+        reader.onload = async () => {
+          const buffer: any = reader.result;
+          await workbook.xlsx.load(buffer);
+          // 默认只解析第一个sheet
+          const worksheet = workbook.worksheets[0];
+          // 获取sheet1的所有rows
+          const rows = worksheet.getSheetValues();
+          if (rows.length === 0) {
+            MessagePlugin.warning("导入的excel文件不可为空！");
+            return;
           }
-          row.eachCell((cell, colNumber) => {
-            console.log("cell", cell, colNumber);
+          let data: any = [];
+          let indexKeyMap: any = {};
+          worksheet.eachRow((row, rowNumber) => {
+            let _data: any = {};
+            row.eachCell((cell, colNumber) => {
+              if (rowNumber === 1) {
+                let _index = columns.findIndex(
+                  (item) => item.header === cell.value
+                );
+                indexKeyMap[colNumber] = columns[_index].key;
+              } else {
+                _data[indexKeyMap[colNumber]] = cell.value;
+              }
+            });
+            if (rowNumber !== 1) {
+              data.push(_data);
+            }
           });
-        });
-        MessagePlugin.success("导入成功!");
-      };
-    }
-  };
-  input.click();
+          resolve(data);
+          MessagePlugin.success("导入成功!");
+        };
+      }
+    };
+    input.click();
+  });
 }
 
 export function saveAsExcel(

src/views/Index.vue

@@ -5,7 +5,7 @@
     <div class="design-body">
       <Graphics />
       <View />
-      <div style="border-left: 1px solid var(--color-border); z-index: 1">
+      <div style="border-left: 1px solid var(--color-border); z-index: 3">
         <FileProps v-if="selections.mode === SelectionMode.File" />
         <PenProps v-else-if="selections.mode === SelectionMode.Pen" />
         <PensProps v-else />
@@ -15,14 +15,14 @@
 </template>
 
 <script lang="ts" setup>
-import Header from './components/Header.vue';
-import Graphics from './components/Graphics.vue';
-import View from './components/View.vue';
-import FileProps from './components/FileProps.vue';
-import PenProps from './components/PenProps.vue';
-import PensProps from './components/PensProps.vue';
+import Header from "./components/Header.vue";
+import Graphics from "./components/Graphics.vue";
+import View from "./components/View.vue";
+import FileProps from "./components/FileProps.vue";
+import PenProps from "./components/PenProps.vue";
+import PensProps from "./components/PensProps.vue";
 
-import { useSelection, SelectionMode } from '@/services/selections';
+import { useSelection, SelectionMode } from "@/services/selections";
 
 const { selections } = useSelection();
 </script>

src/views/components/View.vue

@@ -480,6 +480,9 @@
               :data="dsData"
               :columns="dsColumns"
             >
+              <template #label="{ row }">
+                {{ `${row.label}(${row.key})` }}
+              </template>
               <template #operation="{ row }"> </template>
             </t-table>
           </template>
@@ -568,6 +571,8 @@ onMounted(() => {
   // @ts-ignore
   meta2d.on("contextmenu", contextmenu);
   meta2d.on("click", canvasClick);
+
+  meta2d.on("opened", dataSourceManage);
 });
 
 const watcher = watch(
@@ -624,6 +629,8 @@ onUnmounted(() => {
     // @ts-ignore
     meta2d.off("contextmenu", contextmenu);
     meta2d.off("click", canvasClick);
+
+    meta2d.off("opened", dataSourceManage);
     meta2d.destroy();
   }
 });
@@ -1017,7 +1024,7 @@ const comColumns = ref([
     ellipsis: true,
   },
   {
-    colKey: "addr",
+    colKey: "url",
     title: "接口地址",
     ellipsis: true,
   },
@@ -1052,6 +1059,11 @@ const comOptions = ref<Com[]>([
   },
 ]);
 
+const dataSourceManage = () => {
+  comData.value = (meta2d.store.data as any).comData; //确定字段
+  dsData.value = (meta2d.store.data as any).dsData;
+};
+
 const onOptionClick = (item: Com) => {
   comData.value.push(item);
   popupVisible.value = false;
@@ -1181,11 +1193,30 @@ const comHttpMethodChange = (e: string) => {
   }
 };
 
-const dsData = ref([]);
+const dsData = ref([
+  {
+    label: "数据点1",
+    key: "a-1",
+    value: "12",
+    type: "number/select/bool/color",
+  },
+  {
+    label: "数据点2",
+    key: "a-2",
+    value: "12",
+    type: "number/select/bool/color",
+  },
+  {
+    label: "数据点3",
+    key: "a-3",
+    value: "12",
+    type: "number/select/bool/color",
+  },
+]);
 
 const dsColumns = ref([
   {
-    colKey: "name",
+    colKey: "label",
     title: "名称（数据点ID）",
     ellipsis: true,
   },
@@ -1214,8 +1245,31 @@ const saveToServer = () => {
   dataToCom(comData.value);
 };
 
-const importDataSet = () => {
-  importExcel();
+const importDataSet = async () => {
+  let columns: any = [
+    {
+      header: "名称",
+      key: "label",
+    },
+    {
+      header: "数据ID",
+      key: "key",
+    },
+    {
+      header: "类型",
+      key: "type",
+    },
+    {
+      header: "值",
+      key: "value",
+    },
+  ];
+  // dsData.value = [];
+  let data = await importExcel(columns);
+  console.log("data", data);
+  // setTimeout(() => {
+  dsData.value = data;
+  // }, 2000);
 };
 
 const downloadDataSet = () => {
@@ -1223,7 +1277,7 @@ const downloadDataSet = () => {
   let columns = [
     {
       header: "名称",
-      key: "name",
+      key: "label",
     },
     {
       header: "数据ID",