NEZ-1788 feat：联调后端接口

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

@@ -19,6 +19,7 @@
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
          <top-tool-more-options
+            ref="topTool"
             :delete-objs="batchDeleteObjs"
             id="asset-list"
             :params="filter"
@@ -29,9 +30,10 @@
             export-url="visual/panel/export"
             import-url="visual/panel/import"
             @afterImport="getTableData"
-            :showCur="false"
             :link="obj"
             :showLock="from === fromRoute.asset"
+            :exportBoxShow="true"
+            @export="exportType"
             @panelLockChange="panelLockChange"
           >
             <template v-slot:after>
@@ -41,9 +43,6 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
-              <el-dropdown-item v-has="'main_edit'">
-                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-export-pdf"></i>{{ $t('overall.downloadToPdf') }}</div>
-              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -53,12 +52,12 @@
             <i class="nz-icon nz-icon-create-square"></i>
           </button>
          <top-tool-more-options
+            ref="topTool"
             :delete-objs="batchDeleteObjs"
             id="asset-list"
             :link="obj"
             :params="filter"
             :permissions="{import: 'main_add', export: 'main_edit'}"
-            :showCur="false"
             :params-type="paramsType"
             :showLock="from === fromRoute.endpoint"
             class="top-tool-export margin-r-10"
@@ -66,6 +65,8 @@
             :export-url="'visual/panel/export'"
             :import-url="'visual/panel/import'"
             @afterImport="getTableData"
+            :exportBoxShow="true"
+            @export="exportType"
             @panelLockChange="panelLockChange"
           >
             <template v-slot:after>
@@ -75,9 +76,6 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
-              <el-dropdown-item v-has="'main_edit'">
-                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-export-pdf"></i>{{ $t('overall.downloadToPdf') }}</div>
-              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -153,9 +151,10 @@ import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
+import exportHtmlMixin from '@/components/common/mixin/exportHtml'
 export default {
   name: 'panelTabNew',
-  mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin],
+  mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin],
   props: {
     from: String,
     obj: Object,
@@ -770,6 +769,14 @@ export default {
       } else {
         this.showScreenLoading(false)
       }
+      this.$refs.topTool.closeDialog()
+    },
+    exportType (type) {
+      if (type === 'PDF') {
+        this.htmlToPdf()
+      } else {
+        this.exportToHtml(this.obj.name)
+      }
     }
   },
   mounted () {

nezha-fronted/src/components/common/mixin/exportHtml.js

@@ -1,6 +1,4 @@
-import JSZip from 'jszip'
+import bus from '@/libs/bus'
-import { saveAs } from 'file-saver'
-import Vue from 'vue'
 export default {
   data () {
     return {
@@ -8,84 +6,47 @@ export default {
     }
   },
   methods: {
-    exportHtml () {
+    exportToHtml (name) {
-      // 创建一个JSZIP实例
+      const params = {
-      const zip = new JSZip()
+        format: 'html',
-      // 在zip压缩包中创建一个文件夹，用来放相关依赖
+        panelId: this.showPanel.id,
-      const panel = zip.folder('panel')
+        start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[0])),
-      const packages = panel.folder('packages')
+        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[0]))
-      const fileArr = []
-      let filename = []
-      // 引入含有html字符串的js文件，构造html文件
-      this.returnHtml().then((modules) => {
-        panel.file('index.html', modules)
-        Vue.http.get('components/chart/panelTemp/jsData.json').then((res) => {
-          filename = res.body.data
-          for (const i in res.body.data) {
-            fileArr.push(Vue.http.get(`components/chart/${res.body.data[i]}`))
       }
-          Promise.all(fileArr).then((contents) => {
+      this.$get('/visual/panel/snapshot', params, 'blob').then(res => {
-            for (const i in contents) {
+        const self = this
-              packages.file(filename[i], contents[i].data)
+        let fileName = name
+        const resFileName = ''
+        if (resFileName) {
+          fileName = resFileName
         }
-            // console.log(chartList)
+        if (res.type == 'application/json') {
-            // packages.file('vue/chartList.vue', chartList)
+          const reader = new FileReader() // 创建一个FileReader实例
-            zip.generateAsync({
+          reader.readAsText(res, 'utf-8') // 读取文件,结果用字符串形式表示
-              type: 'blob'
+          reader.onload = function () { // 读取完成后,**获取reader.result**
-            }).then((content) => {
+            const { msg } = JSON.parse(reader.result)
-              // 此处采用file-saver的saveAs方法和直接创建a标签下载的效果是一样的，只是saveAs写起来更简便写
+            self.$message.error(msg) // 弹出错误提示
-              saveAs(content, `${this.fileName}.zip`)
-            })
-          })
-        })
-      })
-    },
-    returnHtml (data) {
-      data = [{
-        id: 1
-      }]
-      let str = ''
-      str += `<!DOCTYPE html>
-              <html lang="en">
-                <head>
-                    <meta charset="UTF-8">
-                    <title>Panel</title>
-                </head>
-                <script src="./packages/panelTemp/js/vue.js"></script>
-                <script src="./packages/panelTemp/js/echarts.js"></script>
-                <script src="./packages/panelTemp/js/httpVueLoader.js"></script>
-                <body>
-                  <div id="app">
-                  <div>
-                    <chartList
-                        :data-list="dataList"
-                        :isExportHtml="true"
-                    ></chartList>
-                  </div>
-                    {{message}}
-                  </div>
-                </body>
-                <script type="text/javascript">
-                var app = new Vue({
-                  el: '#app',
-                  components:{
-                      chartList: httpVueLoader('/packages/chartList.vue')
-                  },
-                  data: {
-                    message: 'Hello Vue!',
-                    dataList: ${JSON.stringify(data)}
-                  },
-                  mounted () {
-                    // axios.get('./data.json').then(res=>{
-                    //   console.log(res)
-                    // })
           }
-                })
+          return
-              </script>
+        }
-              </html>
+        if (window.navigator.msSaveOrOpenBlob) {
-                `
+          // 兼容ie11
-      return new Promise(resolve => {
+          const blobObject = new Blob([res])
-        resolve(str)
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName + '.html')
+        } else {
+          const blob = new Blob([res])
+          const link = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 下载链接
+          link.href = href
+          link.download = fileName + '.html' // 下载后文件名
+          document.body.appendChild(link)
+          link.click() // 点击下载
+          document.body.removeChild(link) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }
+        this.$refs.topTool.closeDialog()
+      }, error => {
+        this.$message.error('123')
       })
     }
   }

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

@@ -53,7 +53,7 @@
           <div class="export-box">
             <span class="export-title">File format</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="item.value!==1">{{item.name}}</el-radio-button>
+              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
             </el-radio-group>
           </div>
         </div>
@@ -153,7 +153,10 @@ export default {
       type: String,
       default: ''
     },
-    deleteObjs: Array
+    deleteObjs: Array,
+    exportBoxShow: {
+      type: Boolean, default: false
+    }
   },
   computed: {
     language () { return this.$store.getters.getLanguage }
@@ -175,8 +178,8 @@ export default {
         { name: 'XLSX', value: 1 },
         { name: 'CSV', value: 2 },
         { name: 'JSON', value: 3 }
-      ]
+      ],
-
+      suffix: '.xlsx'
     }
   },
   mounted () {
@@ -279,6 +282,7 @@ export default {
           this.importFile = null
           this.importBox.value = 1
           this.importBox.record = 'all'
+          this.importBox.format = 1
         })
       }, 200)
     },
@@ -350,7 +354,7 @@ export default {
       params.language = localStorage.getItem('nz-language') || 'en'
       params.format = this.importBox.format
       delete params.statistics
-      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + this.suffix)
       this.closeDialog()
     },
     exportAll () {
@@ -384,7 +388,7 @@ export default {
       params.language = localStorage.getItem('nz-language') || 'en'
       params.format = this.importBox.format
       delete params.statistics
-      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + this.suffix)
       this.closeDialog()
     },
     exportRecords () {
@@ -419,10 +423,25 @@ export default {
       params.format = this.importBox.format
       params.ids = this.deleteObjs.map(item => item.id).join(',')
       delete params.statistics
-      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + this.suffix)
       this.closeDialog()
     },
     exportData () {
+      if (this.importBox.format == 1) {
+        this.suffix = '.xlsx'
+      } else if (this.importBox.format == 2) {
+        this.suffix = '.csv'
+      } else if (this.importBox.format == 3) {
+        this.suffix = '.json'
+      } else if (this.importBox.format == 4) {
+        this.suffix = '.pdf'
+        this.$emit('export', 'PDF')
+        return
+      } else if (this.importBox.format == 5) {
+        this.suffix = '.html'
+        this.$emit('export', 'Html')
+        return
+      }
       if (this.importBox.record === 'all') {
         this.exportAll()
       } else if (this.importBox.record === 'current') {
@@ -481,7 +500,19 @@ export default {
         this.importBox.width = '600px'
       } else if (type == 2) { // export
         this.importBox.title = this.$t('overall.exportExcel')
-        this.importBox.width = '580px'
+        this.importBox.width = this.exportBoxShow ? '850px' : '580px'
+        if (this.exportBoxShow) {
+          this.formatArr = [
+            { name: 'XLSX', value: 1 },
+            { name: 'CSV', value: 2 },
+            { name: 'JSON', value: 3 },
+            { name: 'PDF', value: 4 },
+            { name: 'Html', value: 5 }]
+        } else {
+          this.formatArr = [{ name: 'XLSX', value: 1 },
+            { name: 'CSV', value: 2 },
+            { name: 'JSON', value: 3 }]
+        }
       }
     },
     getTimeString () {
@@ -497,6 +528,13 @@ export default {
     },
     formatNum (num) {
       return num > 9 ? num : '0' + num
+    },
+    exportHtml () {
+      this.$emit('export', this.exportHtmlType)
+    },
+    closeExportHtml () {
+      this.exportHtmlType = 'PDF'
+      this.$emit('closeExportBox')
     }
   },
   watch: {

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

@@ -49,6 +49,7 @@
 
              <top-tool-more-options
                 :delete-objs="batchDeleteObjs"
+                ref="topTool"
                 id="panel"
                 :params="filter"
                 :permissions="{
@@ -60,6 +61,8 @@
                 export-file-name="chart"
                 export-url="/visual/panel/export"
                 import-url="/visual/panel/import"
+                :exportBoxShow="true"
+                @export="exportType"
                 @afterImport="afterImport"
               >
                 <template v-slot:before>
@@ -74,13 +77,6 @@
                   <el-dropdown-item v-has="'panel_view'">
                     <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
                   </el-dropdown-item>
-                  <el-dropdown-item v-has="'main_add'">
-                    <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-export-pdf"></i>{{ $t('overall.downloadToPdf') }}</div>
-                  </el-dropdown-item>
-                  <el-dropdown-item v-has="'main_add'">
-<!--                    <div id="chart-export-html" @click="exportHtml"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>-->
-                    <div id="chart-export-html" @click="exportData"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
-                  </el-dropdown-item>
                 </template>
               </top-tool-more-options>
             </div>
@@ -274,7 +270,9 @@ export default {
       scrollbarWrap: null,
       batchDeleteObjs: [],
       nowTimeType: {},
-      showTopLine: false
+      showTopLine: false,
+      // 导出html 以及 pdf的弹窗
+      exportBoxShow: false
     }
   },
   components: {
@@ -865,60 +863,14 @@ export default {
       } else {
         this.showScreenLoading(false)
       }
+      this.$refs.topTool.closeDialog()
     },
-    exportData () {
+    exportType (type) {
-      this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
+      if (type === 'PDF') {
-      this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
+        this.htmlToPdf()
-      let flag = true
-      let timer = setInterval(() => {
-        flag = true
-        this.$refs.chartList.copyDataList.forEach(chart => {
-          if (chart.type !== 'group') {
-            flag = flag && chart.loaded
-          } else if (chart.collapse) {
-            chart.children.forEach(groupChart => {
-              flag = flag && groupChart.loaded
-            })
-          }
-        })
-        if (flag) {
-          clearInterval(timer)
-          timer = null
-          setTimeout(() => {
-            this.dataList.forEach(item => {
-              if (item.type === 'group') {
-                item.chartData = [item.children]
-                item.loaded = false
-              }
-              if (item.type === 'group' && !item.param.collapse) {
-                item.children.forEach(child => {
-                  child.chartData = this.$refs.chartList.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.$refs['chart' + child.id][0].chartData
-                  item.loaded = false
-                })
       } else {
-                item.chartData = this.$refs.chartList.$refs['chart' + item.id][0].chartData
+        this.exportToHtml(this.showPanel.name)
-                item.loaded = false
       }
-            })
-            const data = JSON.stringify(this.dataList)
-            const blob = new Blob([data], { type: '' })
-            FileSaver.saveAs(blob, 'ceshi.json')
-            // const a = document.createElement('a')
-            // const url = window.URL.createObjectURL(
-            //   new Blob([this.gethtml()], {
-            //     type: ''
-            //   })
-            // )
-            // a.href = url
-            // a.download = 'file.html'
-            // a.click()
-            // window.URL.revokeObjectURL(url)
-          }, 2000)
-        }
-      }, 200)
-    },
-    gethtml () {
-
     }
   },
   created () {

nezha-fronted/src/http.js

@@ -72,11 +72,15 @@ axios.interceptors.response.use(
     return Promise.reject(error)
   }
 )
-export function get (url, params) {
+export function get (url, params, responseType) {
-  return new Promise((resolve) => {
+  const config = {
-    axios.get(url, {
     params: params
-    }).then(response => {
+  }
+  if (responseType) {
+    config.responseType = responseType
+  }
+  return new Promise((resolve) => {
+    axios.get(url, config).then(response => {
       if (url.indexOf('/sys/license/token') !== -1) {
         resolve({
           data: response.data,