NEZ-3023 fix：project topology 增加导入导出功能

nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue

@@ -29,6 +29,7 @@
             class="top-tool-export margin-r-10"
             export-file-name="asset-charts"
             export-url="/visual/dashboard/export"
+            :only-json="true"
             @afterImport="getTableData"
             :link="obj"
             :showLock="from === fromRoute.asset"
@@ -60,6 +61,7 @@
             class="top-tool-export margin-r-10"
             export-file-name="endpoint-charts"
             export-url="/visual/dashboard/export"
+            :only-json="true"
             @afterImport="getTableData"
             @export="exportType"
             @panelLockChange="panelLockChange"

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -45,13 +45,13 @@
       <!-- 新版导入 -->
       <div v-if="importBox.type == 1">
         <div class="upload-body">
-          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" :accept="!isDashboard?'.xlsx,.xls,.csv,.json':'.json'" action="" class="import-upload" drag>
+          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" :accept="!onlyJson?'.xlsx,.xls,.csv,.json':'.json'" action="" class="import-upload" drag>
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-            <div class="el-upload__tip" >{{!isDashboard?$t('overall.importSupport'):$t('overall.supportJson')}}</div>
+            <div class="el-upload__tip" >{{!onlyJson?$t('overall.importSupport'):$t('overall.supportJson')}}</div>
           </el-upload>
         </div>
-        <div class="import-select">
+        <div class="import-select" v-if="!isTopo">
           <div class="exists">
             <span>{{$t('overall.existed')}}</span>
             <el-select v-model="importBox.existed" :popper-append-to-body="false" style="flex:1" size="medium" popper-class="select-auto">
@@ -75,10 +75,10 @@
             </li>
           </ul>
         </div>
-        <div class="footer">
+        <div class="footer" :style="isTopo? 'marginTop:15px' : ''">
           <div class="el-message-box__btns" style="text-align: right;">
             <el-popover
-              v-if="!isDashboard"
+              v-if="!onlyJson"
               placement="bottom-start"
               trigger="click">
               <div class="template-pop">
@@ -108,7 +108,7 @@
           <div class="export-box">
             <span class="export-title">{{$t('export.records')}}</span>
             <el-radio-group v-model="importBox.record"  size="small">
-              <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="(item.value==='records'&&!deleteObjs.length) || (item.value==='all'&&assetOrEndpoint)">
+              <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="(item.value==='records'&&!deleteObjs.length) || (item.value==='all'&&(assetOrEndpoint || isTopo))">
                 {{item.name}}
                 <span v-if="item.value==='records'&&deleteObjs.length">({{deleteObjs.length}})</span>
               </el-radio-button>
@@ -117,7 +117,7 @@
           <div class="export-box">
             <span class="export-title">{{$t('export.fileFormat')}}</span>
             <el-radio-group v-model="importBox.format"  size="small">
-              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" :disabled="isDashboard&&item.name!='JSON'">{{item.name}}</el-radio-button>
+              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" :disabled="onlyJson&&item.name!='JSON'">{{item.name}}</el-radio-button>
             </el-radio-group>
           </div>
         </div>
@@ -272,8 +272,14 @@ export default {
       type: String,
       default: ''
     },
+    isTopo: {
+      type: Boolean, default: false
+    },
     deleteObjs: Array,
-    type: String
+    type: String,
+    onlyJson: {
+      type: Boolean, default: false
+    }
   },
   computed: {
     language () { return this.$store.getters.getLanguage },
@@ -404,6 +410,10 @@ export default {
       })
     },
     importExcel () {
+      if (this.isTopo) {
+        this.importTopo()
+        return
+      }
       if (this.importFile && this.importFile.raw) {
         this.prevent_opt.import = true
         const form = new FormData()
@@ -442,6 +452,38 @@ export default {
         this.$message.error(this.$t('tip.noImportFile'))
       }
     },
+    importTopo () {
+      if (this.importFile && this.importFile.raw) {
+        let reader = new FileReader()// 新建一个FileReader
+        reader.readAsText(this.importFile.raw, 'UTF-8')// 读取文件
+        reader.onload = (evt) => { // 读取完文件之后会回来这里
+          let fileString = evt.target.result // 读取文件内容
+          fileString = JSON.parse(fileString)
+          console.log(fileString)
+          if (!fileString.topo) {
+            this.$message.error(this.$t('IMPORT_FORMAT_ERROR', { 0: '' }))
+            return
+          }
+          try {
+            this.$post(this.importUrl, fileString).then(response => {
+              if (response.code == 200 && response.msg == 'success') {
+                this.$message.success(this.$t('overall.result.success'))
+                this.importBox.show = false
+                this.$emit('afterImport')
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.import = false
+              reader = null
+            })
+          } catch (e) {
+            this.$message.error(this.$t('IMPORT_FORMAT_ERROR',{ 0: '' }))
+          }
+        }
+      } else {
+        this.$message.error(this.$t('tip.noImportFile'))
+      }
+    },
     exportMenuHandler (show) {
       if (show) {
         clearTimeout(timeout)
@@ -703,13 +745,16 @@ export default {
       this.importBox.show = true
       this.importBox.type = type
 
-      if (this.assetOrEndpoint) {
+      if (this.assetOrEndpoint || this.isTopo) {
         this.importBox.record = 'current'
       }
       // isDashboard 只支持JSON
       if (this.isDashboard) {
         this.importBox.format = 3
       }
+      if (this.onlyJson) {
+        this.importBox.format = 3
+      }
       if (type == 2 && (!this.showCur)) {
         this.exportCur()
         return

nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js

@@ -149,6 +149,9 @@ export default {
         })
       })
     },
+    reloadProject () {
+      this.$emit('reload')
+    },
     nodeInit (pen, name) { // 初始化节点参数
       if (pen.data && pen.data.params) {
         return

nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue

@@ -19,9 +19,32 @@
         :use-chart-unit="false"
         class="pickTime margin-r-10">
       </pick-time>
-      <button v-has="'project_edit'" class="top-tool-btn margin-r-10" type="button" @click="editMeta2d()" :title="$t('overall.edit')">
-        <i class="nz-icon nz-icon-edit"></i>
-      </button>
+      <top-tool-more-options
+        :delete-objs="[]"
+        ref="export"
+        id="project-tools"
+        :params="{}"
+        :permissions="{
+            import: 'project_add',
+            export: 'project_edit'
+          }"
+        :isTopo="true"
+        :onlyJson="true"
+        class="top-tool-export margin-l-10 margin-r-10"
+        export-file-name="project-topo"
+        @afterImport="afterImport"
+        :export-url="`/monitor/project/topo/${project.id}/export`"
+        :import-url="`/monitor/project/topo/${project.id}/import`"
+        v-has="['project_add','project_edit','project_delete']"
+      >
+        <template v-slot:before>
+          <div>
+            <el-dropdown-item>
+              <div id="asset-batch-asset" v-has="'project_edit'" @click="editMeta2d"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
+            </el-dropdown-item>
+          </div>
+        </template>
+      </top-tool-more-options>
       <button class="top-tool-btn" type="button" @click="changeScreen" :title="topoScreen? $t('dashboard.screen.exit') : $t('dashboard.screen')">
         <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
       </button>
@@ -57,13 +80,15 @@ import { deepClone } from '@meta2d/core'
 import bus from '@/libs/bus'
 import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
 import meta2dMainOther from '@/components/common/project/meta2d/meta2dMain'
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 
 export default {
   name: 'meta2dHeader',
   mixins: [topoUtil],
   components: {
     topologyTopTool,
-    meta2dMainOther
+    meta2dMainOther,
+    topToolMoreOptions
   },
   props: {
     meta2dId: {},
@@ -227,8 +252,11 @@ export default {
       }
       this.$emit('exitEdit', true)
     },
+    afterImport () {
+      this.$emit('reloadProject')
+    },
     reload () {
-
+      this.$emit('reloadProject')
     }
   }
 }

nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue

@@ -10,6 +10,7 @@
       @edit="beforeEdit"
       @exitEdit="exitEdit"
       @reload="reload"
+      @reloadProject="reloadProject"
       @saveChart="saveChart"
       @getNodesArr="getNodesArr"
     />

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -20,6 +20,7 @@
           id="expression-template-list"
           export-url="/visual/dashboard/export"
           import-url="/visual/dashboard/import"
+          :only-json="true"
           export-file-name="chart-temp"
           :params="searchLabel"
           :params2="{

nezha-fronted/src/components/page/config/template/dashboardTemp.vue

@@ -20,6 +20,7 @@
           id="dashboard-template-list"
           export-url="/visual/dashboard/export"
           import-url="/visual/dashboard/import"
+          :only-json="true"
           export-file-name="dashboard-temp"
           :params="searchLabel"
           :paramsType="'template'"

nezha-fronted/src/components/page/dashboard/dashboard.vue

@@ -78,6 +78,7 @@
                   export-file-name="chart"
                   export-url="/visual/dashboard/export"
                   import-url="/visual/dashboard/import"
+                  :only-json="true"
                   @export="exportType"
                   @afterImport="afterImport"
                 >