矢量数据属性框增加表头模板下载和表头上传

src/renderer/public/excel/header.csv

@@ -0,0 +1,2 @@
+1,Ψһ<EFBFBD><EFBFBD>ʶ,id
+2,<EFBFBD><EFBFBD><EFBFBD><EFBFBD>,name

src/renderer/public/sdk/custom/css/index.css

@@ -161,7 +161,7 @@
   background: rgba(var(--color-base1), 0.2);
   border: 1px solid rgba(var(--color-base1), 0.5);
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
   padding: 5px 16px 4px 16px;
   color: #ffffff;
@@ -448,6 +448,7 @@
 .YJ-custom-base-dialog>.content .table {
   background-color: #ffffff00;
   color: #000;
+  font-size: 12px;
 }
 
 .YJ-custom-base-dialog>.content .table {
@@ -475,9 +476,6 @@
   border-top: none;
 }
 
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr,
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr {}
-
 .YJ-custom-base-dialog>.content .table .table-empty {
   display: flex;
   align-items: center;
@@ -554,8 +552,6 @@
   background-color: rgba(var(--color-base1), 0.1);
 }
 
-.YJ-custom-base-dialog>.content .table .table-body .tr:last-child {}
-
 .YJ-custom-base-dialog>.content .table .tr .th,
 .YJ-custom-base-dialog>.content .table .tr .td {
   flex: 1;
@@ -573,40 +569,7 @@
   justify-content: center;
 }
 
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr .th:nth-child(1),
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr .td:nth-child(1),
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr .th:nth-child(1),
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr .td:nth-child(1) {
-  width: 164px;
-  flex: 0 0 164px;
-}
 
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr .th:nth-child(2),
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr .td:nth-child(2),
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr .th:nth-child(2),
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr .td:nth-child(2) {
-  width: 226px;
-  flex: 0 0 226px;
-}
-
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr .th:nth-child(3),
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr .td:nth-child(3),
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr .th:nth-child(3),
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr .td:nth-child(3) {
-  flex: 0 0 150px;
-  width: 150px;
-  justify-content: center;
-}
-
-.YJ-custom-base-dialog>.content .attribute-content-link .table .tr .td .input-group .input,
-.YJ-custom-base-dialog>.content .attribute-content-vr .table .tr .td .input-group .input {
-  border-radius: 5px 0 0 5px;
-}
-
-.YJ-custom-base-dialog>.content .attribute-content-materials .table .tr .th:nth-child(1),
-.YJ-custom-base-dialog>.content .attribute-content-materials .table .tr .td:nth-child(1) {
-  flex: 0 0 60px;
-}
 
 .YJ-custom-base-dialog>.content .table .tr .td .link-edit {
   min-height: 32px;
@@ -621,68 +584,6 @@
   border-right: none;
 }
 
-.YJ-custom-base-dialog>.content .table.camera-table {
-  overflow-x: auto;
-}
-
-.YJ-custom-base-dialog>.content .table.isc-table {
-  overflow: hidden;
-}
-
-.YJ-custom-base-dialog>.content .table.camera-table .tr {
-  display: inline-flex;
-}
-
-.YJ-custom-base-dialog>.content .table.isc-table .tr {
-  display: flex;
-}
-
-.YJ-custom-base-dialog>.content .table.camera-table .tr:last-child,
-.YJ-custom-base-dialog>.content .table.isc-table .tr:last-child {
-  border-bottom: 1px solid rgba(var(--color-base1), 0.5);
-}
-
-.YJ-custom-base-dialog>.content .table.camera-table .tr .td span,
-.YJ-custom-base-dialog>.content .table.isc-table .tr .td span {
-  white-space: nowrap;
-  margin-left: 10px;
-}
-
-.YJ-custom-base-dialog>.content .table.camera-table .tr .td input[type=checkbox],
-.YJ-custom-base-dialog>.content .table.isc-table .tr .td input[type=checkbox] {
-  cursor: pointer;
-}
-
-.YJ-custom-base-dialog>.content .table.camera-table .table-body,
-.YJ-custom-base-dialog>.content .table.isc-table .table-body {
-  display: inline-flex;
-  flex-direction: column;
-  height: 186px;
-  width: auto;
-}
-
-.YJ-custom-base-dialog>.content .table.camera-table .tr .th,
-.YJ-custom-base-dialog>.content .table.camera-table .tr .td {
-  flex: 0 100px;
-  width: 100px;
-  min-width: 100px;
-}
-
-.YJ-custom-base-dialog>.content .table.isc-table .tr .th,
-.YJ-custom-base-dialog>.content .table.isc-table .tr .td {
-  flex: 1;
-  width: auto;
-  min-width: auto;
-}
-
-.YJ-custom-base-dialog>.content .table.camera-table .tr .th:first-child,
-.YJ-custom-base-dialog>.content .table.camera-table .tr .td:first-child,
-.YJ-custom-base-dialog>.content .table.isc-table .tr .th:first-child,
-.YJ-custom-base-dialog>.content .table.isc-table .tr .td:first-child {
-  flex: 0 74px;
-  min-width: 74px;
-}
-
 .YJ-custom-base-dialog>.content select>option {
   color: #000;
 }
@@ -1215,9 +1116,9 @@
   line-height: 28px;
 }
 
-.YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup button.ew-color-clear {
+/* .YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup button.ew-color-clear {
   margin-right: 8px;
-}
+} */
 
 .YJ-custom-base-dialog .ew-color-picker-box {
   border-width: 4px;
@@ -1779,58 +1680,6 @@
   top: 10px;
 }
 
-/* 点标注 */
-.YJ-custom-base-dialog.billboard-object>.content {
-  width: 590px;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content button.primary {
-  padding: 6px 14px;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content>div .row .col {
-  margin: 0 10px;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content>div .row .col:first-child {
-  margin-left: 0;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content>div .row .col:last-child {
-  margin-right: 0;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content>div .row .label {
-  flex: 0 0 56px;
-  white-space: nowrap;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content .DIV-cy-tab-content-pane .input-select {
-  width: 100px;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content .DIV-cy-tab-content-pane h4 {
-  font-size: 16px;
-  margin-bottom: 10px;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content div .image-box {
-  width: 23px;
-  height: 26px;
-  cursor: pointer;
-  border: 1px solid rgba(var(--color-base1), 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.YJ-custom-base-dialog.billboard-object>.content div .image {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
-}
-
 /* 富文本 */
 .richText-box {
   position: absolute;

src/renderer/src/components/Pagination/index.vue

@@ -10,7 +10,7 @@
     :total="total"
     :small="isSmall"
     class="pagination"
-    :layout='"total, prev, pager, next, jumper" + (pageSizes===false?"":"sizes")'
+    :layout='"total, prev, pager, next, jumper" + (pageSizes===false?"":", sizes")'
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
   />
@@ -94,9 +94,39 @@ const handleCurrentChange = (val) => {
   emit('pagination', { page: val, limit: pageSize.value })
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .pagination {
   float: right;
-  margin-top: 15px;
+  margin-top: 5px !important;
+  ::v-deep .el-pagination__jump {
+    .el-input__wrapper {
+      padding: 0;
+      box-shadow: none;
+      background: none;
+    }
+  }
+  ::v-deep .el-pagination__sizes {
+    .el-select__wrapper {
+      min-height: 32px;
+    }
+  }
+
+  ::v-deep .el-pager {
+    li:hover {
+      color: rgba(var(--color-base1), 1) !important;
+    }
+    .is-active {
+      color: rgba(var(--color-base1), 1) !important;
+    }
+    .more {
+      color: rgba(var(--color-base1), 1) !important;
+    }
+  }
+  ::v-deep .btn-prev, ::v-deep .btn-next {
+    color: #ffffff !important;
+  }
+  ::v-deep .btn-prev:hover, ::v-deep .btn-next:hover {
+    color: rgba(var(--color-base1), 1) !important;
+  }
 }
 </style>

src/renderer/src/icons/svg/export.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.89229 3.79649L5.53964 1.52251L5.53964 9.10012C5.53964 9.3697 5.74956 9.589 6.00761 9.589C6.26566 9.589 6.47557 9.3697 6.47557 9.10012L6.47557 1.5239L9.11089 3.79509C9.1978 3.87052 9.30343 3.90684 9.40906 3.90684C9.5441 3.90684 9.6778 3.84677 9.77006 3.72944C9.93451 3.52132 9.90644 3.21263 9.70722 3.04082L6.30443 0.110347C6.30176 0.107553 6.29908 0.106156 6.29641 0.103363C6.29374 0.101966 6.29106 0.0991725 6.28972 0.0977757C6.2817 0.0907917 6.27368 0.0852045 6.26566 0.0796173C6.25764 0.0740302 6.24828 0.068443 6.23892 0.0628558C6.23758 0.061459 6.23624 0.061459 6.23491 0.0600622C6.21619 0.0488878 6.19613 0.0391103 6.17607 0.0307295L6.17474 0.0307295C6.15468 0.0223487 6.13329 0.0153647 6.1119 0.0111744L6.10922 0.0111744C6.09986 0.00838074 6.08917 0.00698398 6.07981 0.00558721L6.07713 0.00558721C6.06644 0.00419043 6.05708 0.00279355 6.04638 0.00139677L6.04237 0.00139677C6.03435 0.00139677 6.02499 0 6.01697 0L5.97552 0C5.9675 0 5.95947 0.00139677 5.95145 0.00279355C5.94878 0.00279355 5.9461 0.00279355 5.94343 0.00419043L5.91535 0.00838074L5.91401 0.00838074C5.90465 0.00977753 5.8953 0.0125712 5.88594 0.0153647C5.8846 0.0153647 5.88192 0.0167615 5.88059 0.0167615C5.86053 0.0223487 5.84181 0.0293327 5.82309 0.0377135C5.82176 0.0377135 5.82176 0.0391103 5.82042 0.0391103C5.80036 0.047491 5.78165 0.0586654 5.76293 0.0698398C5.74421 0.0824109 5.72549 0.0949821 5.70811 0.110347L2.29731 3.04222C2.09809 3.21403 2.06867 3.52132 2.23313 3.73084C2.39758 3.93896 2.69174 3.9683 2.89229 3.79649Z"   fill="#FFFFFF" ></path><path d="M11.535 7.20337C11.2769 7.20337 11.065 7.42422 11.065 7.6938L11.065 11.0225L0.935 11.0225L0.935 7.6938C0.935 7.42422 0.72805 7.20337 0.47 7.20337C0.21195 7.20337 0 7.42422 0 7.6938L0 11.5129C0 11.7825 0.21195 11.9982 0.47 11.9982L11.53 11.9982C11.7881 11.9982 12 11.7825 12 11.5129L12 7.6938C12 7.42422 11.7931 7.20337 11.535 7.20337Z"   fill="#FFFFFF" ></path></svg>

src/renderer/src/icons/svg/importHeader1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><g  clip-path="url(#clip-path-2256_179)"><path d="M1.19473 4.35725L1.19473 1.80615C1.19473 1.46881 1.46881 1.19473 1.80615 1.19473L10.1939 1.19473C10.5312 1.19473 10.8053 1.46881 10.8053 1.80615L10.8053 10.1939C10.8053 10.5312 10.5312 10.8053 10.1939 10.8053L7.64275 10.8053C7.31245 10.8053 7.04539 11.0723 7.04539 11.4026C7.04539 11.7329 7.31245 12 7.64275 12L10.7859 12C11.4571 12 12 11.4554 12 10.786L12 1.21406C12 0.542899 11.4553 0 10.7859 0L1.21406 0C0.542899 0 0 0.544656 0 1.21406L0 4.35725C0 4.68756 0.267057 4.95461 0.597365 4.95461C0.927672 4.95461 1.19473 4.68756 1.19473 4.35725Z"   fill="#FFFFFF" ></path><path d="M6.20029 8.62311L6.19854 8.62135L3.84949 6.2723C3.61581 6.03863 3.23807 6.03863 3.00439 6.2723C2.77072 6.50598 2.77072 6.88372 3.00439 7.1174L4.33792 8.45093L0.597365 8.45093C0.267057 8.45093 0 8.71799 0 9.04829C0 9.3786 0.267057 9.64566 0.597365 9.64566L4.33441 9.64566L3.00439 10.9757C2.77072 11.2093 2.77072 11.5871 3.00439 11.8208C3.23807 12.0544 3.61581 12.0544 3.84949 11.8208L6.16164 9.50861C6.29341 9.39968 6.37775 9.23453 6.37775 9.05005C6.37775 8.88138 6.30923 8.73204 6.20029 8.62311Z"   fill="#FFFFFF" ></path></g><defs><clipPath id="clip-path-2256_179"><path d="M0 12L12 12L12 0L0 0L0 12Z" fill="white"/></clipPath></defs></svg>

src/renderer/src/icons/svg/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><path   fill-rule="evenodd"  fill="#FFFFFF"  d="M12.32 12.32C13.44 11.04 14.08 9.6 14.24 7.68C14.08 5.76 13.44 4.32 12.32 3.04C11.04 1.92 9.6 1.28 7.68 1.12C5.76 1.28 4.32 1.92 3.04 3.04C1.92 4.32 1.28 5.76 1.12 7.68C1.28 9.6 1.92 11.04 3.04 12.32C4.32 13.44 5.76 14.08 7.68 14.24C9.6 14.08 11.04 13.44 12.32 12.32ZM7.52 0C5.6 0 3.84 0.8 2.24 2.24C0.8 3.84 0 5.6 0 7.52C0 9.6 0.64 11.36 2.08 12.96C3.52 14.4 5.28 15.2 7.2 15.36C9.28 15.52 11.04 14.88 12.64 13.6L15.04 15.84C15.2 16 15.2 16 15.36 16C15.52 16 15.68 16 15.84 15.84C16 15.68 16 15.52 16 15.36C16 15.2 16 15.2 15.84 15.04L13.6 12.64C14.88 11.04 15.52 9.28 15.36 7.2C15.2 5.28 14.4 3.52 12.96 2.08C11.36 0.64 9.6 0 7.52 0Z"></path></svg>

src/renderer/src/views/components/propertyBox/vectorAttr.vue

@@ -2,12 +2,32 @@
   <Dialog ref="baseDialog" :title="title" width="900px" left="calc(50% - 450px)" top="calc(50% - 360px)"
     :closeCallback="closeCallback">
     <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item" style="display: flex;">
+        <button @click="importHeader" style="margin-right: 15px;">
+          <svg class="icon-updateheigh">
+            <use xlink:href="#icon-importHeader"></use>
+          </svg>{{ t('vector.导入表头') }}
+        </button>
+        <button @click="downloadHeader">
+          <svg>
+            <use xlink:href="#icon-download"></use>
+          </svg>{{ t('vector.下载字典模板') }}
+        </button>
+        <button @click="exportExcel" style="position: absolute; right: 25px;">
+          <svg>
+            <use xlink:href="#icon-export"></use>
+          </svg>{{ t('vector.导出') }}
+        </button>
+      </div>
       <span class="custom-divider"></span>
       <div class="div-item">
         <div class="row">
           <div class="col">
             <input type="text" placeholder="输入关键字搜索" v-model="keyword" @input="search">
-            <button class="btn" style="margin-left: 10px;" @click="exportExcel">导出</button>
+            <svg style="position: relative;left: -22px;width: 14px;height: 14px;">
+              <use xlink:href="#icon-search"></use>
+            </svg>
           </div>
           <div class="col">
             <span class="label">名称字段选择</span>
@@ -38,13 +58,10 @@
           </div>
         </div>
         <div class="row">
-          <Pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
+          <Pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" :pageSizes="pageSizes" @pagination="getTableList" />
         </div>
       </div>
     </template>
-    <template #footer>
-      <button @click="close">关闭</button>
-    </template>
   </Dialog>
 </template>
 
@@ -52,9 +69,17 @@
 import { ref } from 'vue'
 import { inject } from 'vue'
 import { TreeApi } from '@/api/tree'
+import { GisApi } from '@/api/gisApi'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import Dialog from '@/components/dialog/baseDialog.vue'
+import {
+  $sendElectronChanel,
+  $recvElectronChanel,
+  $removeElectronChanel
+} from '@/utils/communication'
 import { useTreeNode } from '../tree/hooks/treeNode'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 const FileSaver = require('file-saver')
 const XLSX = require('xlsx')
 
@@ -69,6 +94,7 @@ let originalOptions: any
 let that: any
 const tableData: any = ref([])
 const total: any = ref(0)
+const pageSizes: any = ref([20, 50, 100])
 const pageSize: any = ref(20)
 const pageNum: any = ref(1)
 const maxPageNum: any = ref(0)
@@ -80,6 +106,7 @@ const closeCallback = () => {
   eventBus.emit("destroyComponent")
 }
 const getKeys = () => {
+  keyData.value = []
   for (let key in that.geojson.features[0].properties) {
     let label = key
     for (let index = 0; index < that.options.headTables.length; index++) {
@@ -219,9 +246,84 @@ const exportExcel = () => {
   const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
   FileSaver.saveAs(data, title.value + '.xlsx')
 }
+const importHeader = () => {
+  let node
+  let selectNodes = getSelectedNodes(window.treeObj);
+  if (selectNodes && selectNodes[selectNodes.length - 1]) {
+    node = selectNodes[selectNodes.length - 1]
+  }
+  const dialogParams = {
+    properties: ["openFile", "multiSelections"],
+    filters: [
+      {
+        name: "excel",
+        extensions: ["csv"],
+      },
+    ],
+  };
+
+  openDirectoryDialog(dialogParams, (paths) => {
+    if (!paths.length) {
+      return;
+    }
+    let entity = (window as any)._entityMap.get(node.id)
+    if (!entity) {
+      return
+    }
+    GisApi.parseCsv({ filePath: paths[0] }).then((res) => {
+      if (res.code === 0 || res.code === 200) {
+        let params = JSON.parse(node.params)
+        params.headTables = res.data
+        entity.options.headTables = [...params.headTables]
+        let params2 = {
+          "id": node.id,
+          "sourceName": node.sourceName,
+          "params": params,
+          "isShow": node.isShow ? 1 : 0,
+        }
+        TreeApi.updateDirectoryInfo(params2)
+        cusUpdateNode({ "id": params2.id, "sourceName": params2.sourceName, "params": JSON.stringify(params) })
+        getKeys()
+      }
+    })
+  });
+}
+const downloadHeader = async () => {
+  let p = 'csv'
+
+  const { ipcRenderer } = require('electron')
+  let availablePort = await ipcRenderer.invoke('get-available-port')
+
+  let url = `http://localhost:${availablePort}/excel/header.` + p
+  $sendElectronChanel('saveNetFile', {
+    title: '保存文件',
+    filename: '字典模板',
+    filters: [{ name: '保存文件', extensions: [p] }],
+    url
+  })
+
+  $recvElectronChanel('saveNetFileRes', (e, key) => {
+    console.log(key, 'key')
+    ElMessage({
+      message: '下载结束',
+      type: 'success'
+    })
+    $removeElectronChanel('saveNetFileRes', (res) => {
+      console.log(res)
+    })
+  })
+}
 const close = () => {
   baseDialog.value?.close()
 }
+
+function openDirectoryDialog(option, cb) {
+  const { ipcRenderer } = require('electron')
+  ipcRenderer.send("open-directory-dialog", option);
+  ipcRenderer.once("selectedItem", (e, paths) => {
+    cb(paths);
+  });
+}
 defineExpose({
   open,
   close
@@ -263,4 +365,9 @@ defineExpose({
     }
   }
 }
+.YJ-custom-base-dialog {
+  ::v-deep .foot {
+    padding: 4px;
+  }
+}
 </style>

src/renderer/src/views/components/tree/hooks/treeNode.ts

@@ -325,7 +325,7 @@ export const useTreeNode = () => {
       allowChildren: false
     },
     vector: {
-      rightMenus: ['edit', 'del', 'setView', 'resetView', 'showAttr', 'importHeader']
+      rightMenus: ['edit', 'del', 'setView', 'resetView', 'showAttr']
       // render: renderShp,
       // detailFun: get_detail_shp,
       // allowChildren: true,