123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- <template>
- <div class="pane-container" style="position: relactive">
- <!-- 单独画出来的转换表格 -->
- <el-button v-if="isChart" type="text" style="z-index: 1;position: absolute;top:2px;right: 100px" @click="handleTable()">切换表格</el-button>
- <div v-if="isTable" class="table" style="width: 100%;height:100%;z-index: 1;position: absolute;top:0px;right: 0px;">
- <el-button type="text" style="float: right;margin-right: 100px;" @click="handleChart()">切换图表</el-button>
- <el-table style="width: 100%" border="true" fit highlight-current-row :data="data">
- <template v-for="(item,index) in schema">
- <el-table-column :prop="item.Column" :label="item.Comment" :key="index"></el-table-column>
- </template>
- </el-table>
- </div>
- <component :is="currentType.componentName" :data="chartData" :schema="schema" :chart-style="chartStyle" class="visualize-window" />
- <div v-if="isEditMode" class="chart-style-panel">
- <el-form label-position="top" size="mini">
- <el-form-item :label="$t('chart.chartType')+':'">
- <div class="chart-type-list">
- <span v-for="item in chartTypeList" :key="item.type" :class="{activedIcon :item.type===chartType, disabledIcon: !isUsable(item)}" @click="switchChartType(item)">
- <el-tooltip :content="item.name +': '+item.matchRule.desc" placement="top">
- <svg-icon class="icon" :icon-class="isUsable(item)? item.icon : (item.icon + '_disabled')" />
- </el-tooltip>
- </span>
- </div>
- </el-form-item>
- </el-form>
- </div>
- </div>
- </template>
- <script>
- import lineChart from '@/widgets/lineChart'
- import DataTable from '@/widgets/DataTable'
- import BarChart from '@/widgets/BarChart'
- import StackBarChart from '@/widgets/StackBarChart'
- import HorizontalBar from '@/widgets/horizontalBar'
- import PieChart from '@/widgets/PieChart'
- import BarLineChart from '@/widgets/BarLineChart'
- import LineBarChart from '@/widgets/LineBarChart'
- import chartTypeList from '@/utils/chartTypeList'
- import store from '../store'
- export default {
- inject: ['reload'],
- components: { lineChart, DataTable, BarChart, StackBarChart, PieChart, HorizontalBar, BarLineChart, LineBarChart },
- props: {
- data: {
- type: Array,
- required: true
- },
- schema: {
- type: Array,
- required: true
- },
- chartStyle: {
- require: false,
- type: Object
- },
- chartType: {
- type: String,
- default: 'table'
- },
- isEditMode: {
- type: Boolean,
- default: true
- }
- },
- data() {
- return {
- chartTypeList,
- isTable: false,
- isChart: true,
- }
- },
- computed: {
- allSelected() {
- return store.state.caculCols.concat(store.state.dimensions)
- },
- chartData() {
- console.log("this.schema============", this.schema)
- return this.currentType.dataTransfer ? this.currentType.dataTransfer(this.data, this.schema) : this.data
- },
- currentType() {
- return chartTypeList.find(item => item.type === this.chartType)
- }
- },
- watch: {
- allSelected: {
- deep: true,
- immediate: true,
- handler(newVal) {
- console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!', this.chartType)
- if (!this.currentType.matchRule.isUsable(store.state.dimensions, store.state.caculCols)) {
- this.$emit('update:chartType', 'table')
- }
- // this.reload()
- }
- }
- },
- methods: {
- // 切换表格
- handleTable() {
- console.log("切换表格")
- console.log("chartTypeList", this.chartTypeList)
- console.log("this.schema============", this.schema)
- console.log("this.data============", this.data)
- this.isTable = true
- this.isChart = false
- },
- handleChart() {
- console.log("切换图表")
- this.isChart = true
- this.isTable = false
- },
- isUsable(chart) {
- return chart.matchRule.isUsable(store.state.dimensions, store.state.caculCols)
- },
- switchChartType(chart) {
- if (!chart.matchRule.isUsable(store.state.dimensions, store.state.caculCols)) {
- return
- }
- this.$emit('update:chartType', chart.type)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .pane-container {
- display: flex;
- height: 100%;
- .visualize-window {
- width: 100%;
- }
- .chart-style-panel {
- width: 200px;
- flex-shrink: 0;
- padding: 10px;
- .chart-type-list {
- width: 100%;
- display: grid;
- justify-items: center;
- grid-template-columns: repeat(5, 1fr);
- grid-auto-rows: 1fr;
- grid-gap: 10px;
- span {
- line-height: initial;
- height: 100%;
- font-size: 22px;
- cursor: pointer;
- text-align: center;
- width: 100%;
- position: relative;
- .icon {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- }
- }
- span::before {
- content: "";
- width: 100%;
- padding-bottom: 100%;
- display: block;
- }
- .disabledIcon {
- cursor: not-allowed;
- }
- .activedIcon {
- background: #c9c9c9;
- }
- }
- }
- }
- </style>
|