170 lines
4.2 KiB
Vue
170 lines
4.2 KiB
Vue
<template>
|
|
<a-card :bordered="false" style="margin-left: 20px;height: 100%;">
|
|
<div class="detail-top">
|
|
<div class="top-back" @click="handleback">
|
|
<img class="icon-back" src="../../assets/images/web-statistics/return.png" alt="">
|
|
<span style="margin-left: 10px;">return</span>
|
|
</div>
|
|
<div class="top-actions">
|
|
<div class="right-btn" @click="downloadFile">
|
|
<img class="icon-download" src="../../assets/images/web-statistics/download.png" alt="">
|
|
<span style="margin-left: 10px;">
|
|
TXT
|
|
</span>
|
|
</div>
|
|
<div class="right-btn" @click="viewFile">
|
|
<img class="icon-view" src="../../assets/images/web-statistics/view.png" alt="">
|
|
<span style="margin-left: 10px;">
|
|
View Report
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="file-content">
|
|
<a-spin style="height: 100%;" :spinning="spinning">
|
|
<pre>{{ fileText }}</pre>
|
|
</a-spin>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction } from '../../api/manage'
|
|
export default {
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default:""
|
|
},
|
|
sampleId: {
|
|
type: String,
|
|
default:""
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
spinning: false,
|
|
fileText: "",
|
|
fileSrc:""
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getFildBlob();
|
|
},
|
|
methods: {
|
|
handleback() {
|
|
this.$emit("back",false)
|
|
},
|
|
getFildBlob() {
|
|
let _this = this
|
|
_this.spinning = true
|
|
let paramsRr = {
|
|
type: this.type,
|
|
sampleId: this.sampleId,
|
|
}
|
|
let paramsSoh = {
|
|
sohId:this.sampleId
|
|
}
|
|
let url = this.type === "soh" ? "/webStatistics/sohFile" : "/webStatistics/arFile"
|
|
let params = this.type === "soh" ? paramsSoh : paramsRr
|
|
getAction(url, params).then((res) => {
|
|
_this.spinning = false
|
|
if (res.code && res.code==500) {
|
|
_this.fileSrc = ""
|
|
this.$message.warning("This operation fails. Contact your system administrator")
|
|
} else {
|
|
const blob = new Blob([res], { type: 'text/plain' })
|
|
_this.fileSrc = window.URL.createObjectURL(blob)
|
|
var reader = new FileReader();
|
|
reader.readAsText(blob);
|
|
reader.onload = function(){
|
|
//读取完毕后输出结果
|
|
_this.fileText = reader.result
|
|
}
|
|
}
|
|
})
|
|
},
|
|
downloadFile() {
|
|
if (this.fileSrc) {
|
|
let link = document.createElement('a')
|
|
link.href = this.fileSrc
|
|
link.target = '_blank'
|
|
link.download = this.type
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
} else {
|
|
this.$message.warning("This operation fails. Contact your system administrator")
|
|
}
|
|
},
|
|
viewFile() {
|
|
if (this.fileSrc) {
|
|
let link = document.createElement('a')
|
|
link.href = this.fileSrc
|
|
link.target = '_blank'
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
} else {
|
|
this.$message.info("File preview failed")
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.detail-top{
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 0 10px;
|
|
background-color: rgba(12, 235, 201, 0.05);
|
|
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
|
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
.top-back{
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #69a19f;
|
|
cursor: pointer;
|
|
.icon-back{
|
|
width: 28px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
.top-actions{
|
|
.right-btn{
|
|
display: inline-block;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 12px;
|
|
margin-left: 20px;
|
|
background-color: #1397a3;
|
|
cursor: pointer;
|
|
.icon-download{
|
|
width: 16px;
|
|
height: 19px;
|
|
}
|
|
.icon-view{
|
|
width: 15px;
|
|
height: 16px;
|
|
}
|
|
a{
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.file-content{
|
|
height: calc(100% - 66px);
|
|
border: 1px solid #1397a3;
|
|
overflow: auto;
|
|
padding: 15px;
|
|
}
|
|
</style> |