NEZ-1788 feat：联调后端接口

2022-05-24 15:04:46 +08:00
parent c7cd680bdf
commit f14d2a5bb8
5 changed files with 126 additions and 164 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/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 () {
--- a/nezha-fronted/src/components/common/mixin/exportHtml.js
+++ b/nezha-fronted/src/components/common/mixin/exportHtml.js
@@ -1,6 +1,4 @@
-import JSZip from 'jszip'
-import { saveAs } from 'file-saver'
-import Vue from 'vue'
+import bus from '@/libs/bus'
 export default {
  data () {
    return {
@@ -8,84 +6,47 @@ export default {
    }
  },
  methods: {
-    exportHtml () {
-      // 创建一个JSZIP实例
-      const zip = new JSZip()
-      // 在zip压缩包中创建一个文件夹，用来放相关依赖
-      const panel = zip.folder('panel')
-      const packages = panel.folder('packages')
-      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]}`))
+    exportToHtml (name) {
+      const params = {
+        format: 'html',
+        panelId: this.showPanel.id,
+        start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[0])),
+        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[0]))
      }
-          Promise.all(fileArr).then((contents) => {
-            for (const i in contents) {
-              packages.file(filename[i], contents[i].data)
+      this.$get('/visual/panel/snapshot', params, 'blob').then(res => {
+        const self = this
+        let fileName = name
+        const resFileName = ''
+        if (resFileName) {
+          fileName = resFileName
        }
-            // console.log(chartList)
-            // packages.file('vue/chartList.vue', chartList)
-            zip.generateAsync({
-              type: 'blob'
-            }).then((content) => {
-              // 此处采用file-saver的saveAs方法和直接创建a标签下载的效果是一样的，只是saveAs写起来更简便写
-              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)
-                    // })
+        if (res.type == 'application/json') {
+          const reader = new FileReader() // 创建一个FileReader实例
+          reader.readAsText(res, 'utf-8') // 读取文件,结果用字符串形式表示
+          reader.onload = function () { // 读取完成后,**获取reader.result**
+            const { msg } = JSON.parse(reader.result)
+            self.$message.error(msg) // 弹出错误提示
          }
-                })
-              </script>
-              </html>
-                `
-      return new Promise(resolve => {
-        resolve(str)
+          return
+        }
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res])
+          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')
      })
    }
  }
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/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: {
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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 () {
-      this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
-      this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
-      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
-                })
+    exportType (type) {
+      if (type === 'PDF') {
+        this.htmlToPdf()
      } else {
-                item.chartData = this.$refs.chartList.$refs['chart' + item.id][0].chartData
-                item.loaded = false
+        this.exportToHtml(this.showPanel.name)
      }
-            })
-            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 () {
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -72,11 +72,15 @@ axios.interceptors.response.use(
    return Promise.reject(error)
  }
 )
-export function get (url, params) {
-  return new Promise((resolve) => {
-    axios.get(url, {
+export function get (url, params, responseType) {
+  const config = {
    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,