301 lines
7.7 KiB
Vue
301 lines
7.7 KiB
Vue
<!--
|
||
@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>
|