diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue index d5ce05025..af13d7524 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue @@ -19,7 +19,8 @@ @@ -53,12 +52,12 @@ @@ -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 () { diff --git a/nezha-fronted/src/components/common/mixin/exportHtml.js b/nezha-fronted/src/components/common/mixin/exportHtml.js index f33abb36b..c29ae2a8c 100644 --- 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])) + } + this.$get('/visual/panel/snapshot', params, 'blob').then(res => { + const self = this + let fileName = name + const resFileName = '' + if (resFileName) { + fileName = resFileName + } + 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) // 弹出错误提示 } - Promise.all(fileArr).then((contents) => { - for (const i in contents) { - packages.file(filename[i], contents[i].data) - } - // 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 += ` - - - - Panel - - - - - -
-
- -
- {{message}} -
- - - - ` - 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') }) } } diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue index 0a551dd12..295b96dd0 100644 --- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue +++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue @@ -53,7 +53,7 @@
File format - {{item.name}} + {{item.name}}
@@ -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: { diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index 83a2811cb..63fac9a6d 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -49,6 +49,7 @@ @@ -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 - }) - } else { - item.chartData = this.$refs.chartList.$refs['chart' + item.id][0].chartData - 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 () { - + exportType (type) { + if (type === 'PDF') { + this.htmlToPdf() + } else { + this.exportToHtml(this.showPanel.name) + } } }, created () { diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js index 8952e8f5b..e2aa3d297 100644 --- 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) { +export function get (url, params, responseType) { + const config = { + params: params + } + if (responseType) { + config.responseType = responseType + } return new Promise((resolve) => { - axios.get(url, { - params: params - }).then(response => { + axios.get(url, config).then(response => { if (url.indexOf('/sys/license/token') !== -1) { resolve({ data: response.data,