NEZ-2361 feat：dashboard snapshot 导出页面开发
This commit is contained in:
zyh
@@ -307,9 +307,8 @@
|
||||
border-right: unset !important;
|
||||
}
|
||||
.editor-core{
|
||||
height: auto !important;
|
||||
height: 0 !important;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ql-container.ql-snow {
|
||||
border: unset !important
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
.nz-dialog.snapshot-dialog{
|
||||
.el-dialog__header{
|
||||
padding: 15px;
|
||||
padding-right: 40px;
|
||||
border-bottom: 1px solid $--border-color-light;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
.el-dialog__title{
|
||||
font-family: Roboto-Medium;
|
||||
font-size: 16px;
|
||||
color: $--color-text-primary;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding: 20px;
|
||||
padding-bottom: 30px;
|
||||
.snapshot-name,.snapshot-time{
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 14px;
|
||||
color: $--color-text-regular;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
.el-progress-bar{
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.el-progress-bar__outer{
|
||||
height: 20px;
|
||||
border-radius: 0;
|
||||
background-color: $--background-color-2;
|
||||
border: 1px solid $--border-color-light;
|
||||
box-sizing: border-box;
|
||||
overflow: unset;
|
||||
.el-progress-bar__inner{
|
||||
transition: width 0.3s linear;
|
||||
border-radius: 0;
|
||||
background-color:#3B92F1;
|
||||
height: 18px;
|
||||
// height: 20px;
|
||||
// position: absolute;
|
||||
// left: -1px;
|
||||
// top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.snapshot-elapsed{
|
||||
font-family: Roboto-Black;
|
||||
font-size: 12px;
|
||||
color: $--color-text-regular;
|
||||
letter-spacing: 0;
|
||||
line-height: 17px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.snapshot-msg{
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 14px;
|
||||
color: $--color-text-regular;
|
||||
letter-spacing: 0;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.el-dialog__footer{
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid $--border-color-light;
|
||||
.el-message-box__btns{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
@import './common/popBox/selectPanel.scss';
|
||||
@import './common/popBox/selectDashboard.scss';
|
||||
@import './common/popBox/selectWalk.scss';
|
||||
@import './common/popBox/snapshotProgress.scss';
|
||||
@import './common/project/popData/Info.scss';
|
||||
@import './common/project/L5/popData/common.scss';
|
||||
@import './common/project/L5/CanvasContextMenu.scss';
|
||||
|
||||
@@ -1282,7 +1282,7 @@ li {
|
||||
}
|
||||
.import-failContent-dialog{
|
||||
.el-dialog__header{
|
||||
padding: 14px;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid $--border-color-light;
|
||||
}
|
||||
.el-dialog__body{
|
||||
|
||||
@@ -44,6 +44,7 @@ export default {
|
||||
['image'] // 上传图片
|
||||
]
|
||||
},
|
||||
bounds: '.rich-text-editor',
|
||||
placeholder: this.placeholder
|
||||
},
|
||||
maxLength: 0, // 记录最大长度
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
class="nz-dialog snapshot-dialog"
|
||||
width="472px"
|
||||
:title="$t('overall.snapshoot')"
|
||||
destroy-on-close
|
||||
:modal-append-to-body="false"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<div>
|
||||
<p class="snapshot-name">{{$t('overall.name')}}：{{showPanel.name}}</p>
|
||||
<p class="snapshot-time">{{$t('overall.time')}}：{{searchTime[0]}}—{{searchTime[1]}}</p>
|
||||
<el-progress :percentage="process" :stroke-width="20" :show-text="false" stroke-linecap="butt"></el-progress>
|
||||
<p class="snapshot-elapsed">
|
||||
<span>{{$t('dashboard.elapsedTime')}}：{{secondFormatter(elapsedTime)}}</span>
|
||||
<span v-if="total!=undefined">{{done}}/{{total}}</span>
|
||||
</p>
|
||||
<p class="snapshot-msg">{{$t('dashboard.snapshotTip1')}}{{$t('dashboard.snapshotTip2')}}</p>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="el-message-box__btns">
|
||||
<button :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button--small nz-btn-style-normal" @click="startTimer">
|
||||
<span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
|
||||
</button>
|
||||
<button class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
|
||||
<span>{{$t('overall.close')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/libs/bus'
|
||||
|
||||
function create (f) {
|
||||
const blob = new Blob(['(' + f + ')()'])
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const worker = new Worker(url)
|
||||
return worker
|
||||
}
|
||||
const createWorker = (callback, time) => {
|
||||
const pollingWorker = create(`function (e) {
|
||||
setInterval(function () {
|
||||
this.postMessage(null)
|
||||
}, ${time})
|
||||
}`)
|
||||
pollingWorker.onmessage = callback
|
||||
return pollingWorker
|
||||
}
|
||||
const stopWorker = (vm) => {
|
||||
try {
|
||||
vm && vm.terminate()
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'snapshotProgress',
|
||||
props: {
|
||||
showPanel: {
|
||||
type: Object
|
||||
},
|
||||
searchTime: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
snapshotVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: this.snapshotVisible, // 弹窗显示隐藏
|
||||
timer: null, // 获取运行时间定时器
|
||||
task: null, // 获取任务进度定时器
|
||||
elapsedTime: 0, // 运行时间
|
||||
tid: undefined, // 任务id
|
||||
total: undefined,
|
||||
done: undefined,
|
||||
process: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async startTimer () {
|
||||
this.prevent_opt.import = true
|
||||
|
||||
// 定时获取运行时间
|
||||
this.timer = createWorker(() => {
|
||||
this.elapsedTime += 100
|
||||
}, 100)
|
||||
|
||||
const vars = this.$store.getters.getVariablesArr.map(item => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.checked.join('|')
|
||||
}
|
||||
})
|
||||
const params = {
|
||||
format: 'html',
|
||||
panelId: this.showPanel.id,
|
||||
start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[0])),
|
||||
end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[1])),
|
||||
vars: vars
|
||||
}
|
||||
// 创建任务
|
||||
const res = await this.$post('/visual/panel/snapshot/task', params)
|
||||
if (res.code === 200) {
|
||||
this.tid = res.data.tid
|
||||
this.getResult()
|
||||
}
|
||||
},
|
||||
// 任务进度查询
|
||||
getResult () {
|
||||
this.task = setInterval(async () => {
|
||||
if (this.process < 100) {
|
||||
try {
|
||||
const res = await this.$get('/visual/panel/snapshot/result/' + this.tid)
|
||||
this.total = res.data.taskId.total
|
||||
this.done = res.data.taskId.done
|
||||
this.process = parseFloat(res.data.taskId.process)
|
||||
} catch (error) {}
|
||||
} else {
|
||||
this.downloadSnapshot()
|
||||
this.tid = undefined
|
||||
this.clearTimer()
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
// 导出快照
|
||||
downloadSnapshot () {
|
||||
this.$get('/visual/panel/snapshot/download/' + this.tid, {}, 'blob').then(res => {
|
||||
const self = this
|
||||
const fileName = this.showPanel.name
|
||||
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) // 弹出错误提示
|
||||
}
|
||||
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.prevent_opt.import = false
|
||||
this.$emit('update:snapshotVisible', false)
|
||||
}, () => {
|
||||
this.$message.error('123')
|
||||
})
|
||||
},
|
||||
// 关闭定时器 取消任务
|
||||
clearTimer () {
|
||||
stopWorker(this.timer)
|
||||
clearInterval(this.task)
|
||||
},
|
||||
// 关闭弹窗
|
||||
closeDialog () {
|
||||
this.$emit('update:snapshotVisible', false)
|
||||
},
|
||||
// 秒转为时-分-秒
|
||||
secondFormatter (millisecond) {
|
||||
// if (millisecond >= 1000) {
|
||||
const secondTime = parseInt(millisecond / 1000)
|
||||
let time = parseInt(secondTime) + 's'
|
||||
if (secondTime > 60) {
|
||||
const second = parseInt(secondTime % 60)
|
||||
let min = parseInt(secondTime / 60)
|
||||
time = min + 'min ' + second + 's'
|
||||
|
||||
if (min > 60) {
|
||||
min = parseInt(secondTime / 60 % 60)
|
||||
const hour = parseInt((secondTime / 60) / 60)
|
||||
time = hour + 'h ' + min + 'min ' + second + 's'
|
||||
}
|
||||
}
|
||||
return time
|
||||
// } else {
|
||||
// return millisecond + 'ms'
|
||||
// }
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearTimer()
|
||||
if (this.tid) {
|
||||
this.$get('/visual/panel/snapshot/cancel/' + this.tid)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -142,6 +142,8 @@
|
||||
<transition name="right-box">
|
||||
<panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" @reload="panelReload" @reloadForDel="panelReloadForDel" ></panel-box>
|
||||
</transition>
|
||||
|
||||
<snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible"></snapshotProgress>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -162,6 +164,7 @@ import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
|
||||
import exportHtmlMixin from '@/components/common/mixin/exportHtml'
|
||||
import * as echarts from 'echarts'
|
||||
import panelVariables from '@/components/common/panel/panelVariables'
|
||||
import snapshotProgress from '@/components/common/snapshotProgress/snapshotProgress.vue'
|
||||
// import FileSaver from 'file-saver'
|
||||
// import chartData from './testData'
|
||||
export default {
|
||||
@@ -309,7 +312,8 @@ export default {
|
||||
// 查看模式
|
||||
mode: '',
|
||||
variables: [],
|
||||
variablesInit: false // 判断variables 是否加载完成
|
||||
variablesInit: false, // 判断variables 是否加载完成
|
||||
snapshotVisible: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -319,7 +323,8 @@ export default {
|
||||
selectDashboard,
|
||||
chartTempBox,
|
||||
chartRightBox,
|
||||
panelVariables // 处理panel变量的组件
|
||||
panelVariables, // 处理panel变量的组件
|
||||
snapshotProgress // 快照进度
|
||||
},
|
||||
computed: {
|
||||
chartRightBoxShow () {
|
||||
@@ -994,7 +999,8 @@ export default {
|
||||
if (type === 'PDF') {
|
||||
this.htmlToPdf()
|
||||
} else {
|
||||
this.exportToHtml(this.showPanel.name)
|
||||
// this.exportToHtml(this.showPanel.name)
|
||||
this.snapshotVisible = true
|
||||
}
|
||||
},
|
||||
// 切换查看模式
|
||||
|
||||
Reference in New Issue
Block a user