初始化
This commit is contained in:
砂糖
300
frontend/packages/BigScreenDesign/DataViewDialog/index.vue
Normal file
300
frontend/packages/BigScreenDesign/DataViewDialog/index.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<!--
|
||||
@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>
|
||||
Reference in New Issue
Block a user