<!--
@name:数据预览弹窗
@description:
@author: liu.shiyi
@time:
-->
<template>
<div class="bs-data-view-dialog">
<el-dialog
:close-on-click-modal="false"
title="数据查看"
width="60%"
:visible.sync="formVisible"
:append-to-body="false"
class="bs-dialog-wrap bs-el-dialog"
>
<div class="table-box">
<el-table
ref="table"
v-loading="loading"
max-height="500"
class="bs-table bs-el-table fixed-header-table"
:data="dataList"
>
<el-table-column
v-for="(col,index) in columnData"
:key="index"
show-overflow-tooltip
:prop="col.alias"
:label="getLabel(col)"
align="center"
/>
</el-table>
</div>
<div
slot="footer"
class="dialog-footer"
>
<el-button
class="bs-el-button-default cancel"
@click="cancel"
>
取消
</el-button>
<DownloadExcel
:data="dataList"
:fields="fields"
:name="chartTitle+'数据导出'"
class="output-excel"
:before-finish="exportHandler"
:before-generate="generate"
>
<el-button
type="primary"
:loading="exportLoading"
>
导出数据
</el-button>
</DownloadExcel>
</div>
</el-dialog>
</div>
</template>
<script>
import { getUpdateChartInfo } from 'data-room-ui/js/api/bigScreenApi'
import { mapState } from 'vuex'
import Vue from 'vue'
import JsonExcel from 'vue-json-excel'
Vue.component('DownloadExcel', JsonExcel)
export default {
name: 'DataViewDialog',
components: {},
props: {
},
data () {
return {
chartTitle: '',
fields: {},
formVisible: false,
exportLoading: false,
loading: false,
dataList: [],
columnData: {}
}
},
computed: {
...mapState({
pageCode: state => state.bigScreen.pageInfo.code
})
},
watch: {},
created () {
},
mounted () {
},
methods: {
init (config) {
this.resetData()
this.chartTitle = config.title
this.formVisible = true
this.getDataList(config)
},
// 获取数据列表
getDataList (config) {
this.loading = true
// 如果是G2组件并且未配置数据集的情况下，则需要从option里面取数据
if ((['customComponent', 'remoteComponent', 'echartsComponent'].includes(config.type) && (!config.dataSource.businessKey)) || (config.expressionCodes && config.expressionCodes.length)) {
this.getDataByOption(config)
this.fieldsFormat()
this.loading = false
} else {
const params = {
chart: {
...config,
option: undefined
},
current: 1,
pageCode: this.pageCode,
type: config.type
}
// 调接口获取数据
getUpdateChartInfo(params).then(res => {
this.loading = false
if (Array.isArray(res.data)) {
this.dataList = res.data || []
} else {
// 如果返回的data不是数组，存在以下几种情况：则直接从option中获取
// 1、是组件绑定的是js数据集或者是http前端数据集,
// 2、是组件返回的模拟数据为null
this.getDataByOption(config)
}
this.columnData = res.columnData || {}
this.fieldsFormat()
}).catch(err => { console.log(err) }).finally(() => {
this.loading = false
})
}
},
// 通过option获取数据
getDataByOption (config) {
let list = []
if (config.chartType === 'Treemap') {
list = config.option.data.children
} else if (config.type === 'tables') {
list = config.option.tableData
} else if (config.expressionCodes && config.expressionCodes.length) {
list = [{ title: config.customize.title }]
} else {
list = config.option.data
}
let keyList = []
if (list && list.length) {
// 如果list[0]是对象
if (typeof list[0] === 'object' && list[0] !== null) {
keyList = Object.keys(list[0])
} else {
keyList = list
}
for (const key of keyList) {
const _key = key + ''
this.columnData[_key] = {
aggregate: '',
alias: _key,
originalColumn: _key,
remark: _key,
tableName: '',
type: 'varchar'
}
}
} else {
this.columnData = {}
}
this.dataList = list || []
},
// 获取表格的表头
getLabel (col) {
return col.remark || col.alias
},
// 数据重置
resetData () {
this.columnData = {}
this.dataList = []
this.fields = {}
this.chartTitle = ''
},
// 格式化fields
fieldsFormat () {
if (this.columnData && Object.keys(this.columnData).length) {
for (const item in this.columnData) {
this.fields[this.columnData[item].remark || this.columnData[item].alias] = this.columnData[item].alias
}
} else {
this.fields = {}
}
},
// 取消
cancel () {
this.formVisible = false
},
generate (val) {
if (!Object.keys(this.fields).length) {
this.$message.warning('数据为空')
}
this.formVisible = false
this.exportLoading = true
},
// 导出数据
exportHandler () {
this.exportLoading = false
if (Object.keys(this.fields).length) {
this.$message.success('数据导出成功')
}
this.formVisible = false
}
}
}
</script>
<style lang="scss" scoped>
.bs-data-view-dialog{
::v-deep .el-dialog__body{
background-color: var(--bs-background-2) !important;
overflow: hidden;
max-height: 540px!important;
}
.table-box{
height: 100%;
overflow-y: auto; /* 当内容溢出时显示垂直滚动条 */
}
.dialog-footer{
display: flex;
justify-content: flex-end;
.cancel{
margin-right: 10px;
overflow-y: hidden;
}
}
::v-deep .el-table__body-wrapper{
min-height: 200px !important;
}
.el-table th.el-table__cell.is-leaf, .el-table ::v-deep td.el-table__cell{
border-bottom:none;
}
::v-deep .el-loading-mask{
background-color: var(--bs-background-2) !important;
}
.el-table ::v-deep thead{
color: var(--bs-el-title);
}
.bs-el-table ::v-deep td.el-table__cell{
color: #bcc9d4;
}
.el-table--scrollable-y ::v-deep .el-table__body-wrapper{
overflow: auto!important;
}
/* 修改滚动条的样式 */
::v-deep .el-dialog__body::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
background-color: #888; /* 滚动条拖动块颜色 */
height: 6px;
border-radius: 5px;
}
::v-deep .el-dialog__body::-webkit-scrollbar-track {
background-color: transparent; /* 滚动条轨道颜色 */
}
/* 鼠标悬停在滚动条上时的样式 */
::v-deep .el-dialog__body::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
}
/* 自定义滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 6px; /* 滚动条宽度 */
height: 6px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #888; /* 滚动条拖动块颜色 */
height: 100px;
border-radius: 5px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
background-color: transparent; /* 滚动条轨道颜色 */
}
/* 鼠标悬停在滚动条上时的样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #555;
cursor: pointer;
}
</style>