github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-03-01 07:42:52 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #259 from dataease/dev

Browse Source 
Dev
This commit is contained in:
fit2cloudrd 2021-07-19 15:00:57 +08:00 committed by GitHub
commit 31294e8ed0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 345 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -25,7 +25,7 @@
"file-save": "^0.2.0", "file-save": "^0.2.0",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"fit2cloud-ui": "1.2.0", "fit2cloud-ui": "1.2.0",
"html2canvas": "^1.0.0-rc.7", "html2canvasde": "^v1.1.4-de",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsencrypt": "^3.0.0-rc.1", "jsencrypt": "^3.0.0-rc.1",
"lodash": "4.17.21", "lodash": "4.17.21",

1
frontend/src/api/chart/chart.js
View File

@ -15,6 +15,7 @@ export function ajaxGetData(id, data) {
method: 'post', method: 'post',
loading: true, loading: true,
hideMsg: true, hideMsg: true,
timeout: 30000,
data data
}) })
} }

11
frontend/src/api/panel/panel.js
View File

@ -22,6 +22,7 @@ export function querySubject(data) {
url: '/panel/subject/query', url: '/panel/subject/query',
method: 'post', method: 'post',
loading: true, loading: true,
timeout: 30000,
data data
}) })
} }
@ -30,6 +31,7 @@ export function querySubjectWithGroup(data) {
return request({ return request({
url: '/panel/subject/querySubjectWithGroup', url: '/panel/subject/querySubjectWithGroup',
method: 'post', method: 'post',
timeout: 30000,
data data
}) })
} }
@ -56,6 +58,7 @@ export function viewData(id, data) {
return request({ return request({
url: '/chart/view/getData/' + id, url: '/chart/view/getData/' + id,
method: 'post', method: 'post',
timeout: 30000,
hideMsg: true, hideMsg: true,
data data
}) })
@ -64,6 +67,7 @@ export function panelSave(data) {
return request({ return request({
url: 'panel/group/save', url: 'panel/group/save',
method: 'post', method: 'post',
timeout: 30000,
loading: true, loading: true,
data data
}) })
@ -72,7 +76,8 @@ export function findOne(id) {
return request({ return request({
url: 'panel/group/findOne/' + id, url: 'panel/group/findOne/' + id,
method: 'get', method: 'get',
loading: true loading: true,
timeout: 30000
}) })
} }
@ -87,6 +92,7 @@ export function getPreviewData(data) {
return request({ return request({
url: '/panel/table/getPreviewData', url: '/panel/table/getPreviewData',
method: 'post', method: 'post',
timeout: 30000,
data data
}) })
} }
@ -125,6 +131,7 @@ export function get(url) {
export function delGroup(groupId) { export function delGroup(groupId) {
return request({ return request({
url: '/panel/group/deleteCircle/' + groupId, url: '/panel/group/deleteCircle/' + groupId,
method: 'post' method: 'post',
timeout: 30000
}) })
} }

4
frontend/src/lang/en.js
View File

@ -804,7 +804,9 @@ export default {
color_energy: 'Energy', color_energy: 'Energy',
color_red: 'Red', color_red: 'Red',
color_fast: 'Fast', color_fast: 'Fast',
color_spiritual: 'Spiritual' color_spiritual: 'Spiritual',
chart_data: 'Data',
chart_style: 'Style'
}, },
dataset: { dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

4
frontend/src/lang/tw.js
View File

@ -804,7 +804,9 @@ export default {
color_fast: '輕快', color_fast: '輕快',
color_spiritual: '靈動', color_spiritual: '靈動',
chart_details: '视图明细', chart_details: '视图明细',
export_details: '导出明细' export_details: '导出明细',
chart_data: '數據',
chart_style: '樣式'
}, },
dataset: { dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個', sheet_warn: '有多個sheet頁面，默認抽取第一個',

4
frontend/src/lang/zh.js
View File

@ -804,7 +804,9 @@ export default {
color_fast: '轻快', color_fast: '轻快',
color_spiritual: '灵动', color_spiritual: '灵动',
chart_details: '视图明细', chart_details: '视图明细',
export_details: '导出明细' export_details: '导出明细',
chart_data: '数据',
chart_style: '样式'
}, },
dataset: { dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个', sheet_warn: '有多个 Sheet 页，默认抽取第一个',

6
frontend/src/settings.js
View File

@ -15,5 +15,9 @@ module.exports = {
* @description Whether show the logo in sidebar * @description Whether show the logo in sidebar
*/ */
sidebarLogo: false, sidebarLogo: false,
showSettings: true showSettings: true,
interruptTokenContineUrls: [
'/api/sys_msg/list/',
'/dataset/taskLog/list/'
]
} }

6
frontend/src/utils/request.js
View File

@ -8,7 +8,7 @@ import i18n from '@/lang'
import { tryShowLoading, tryHideLoading } from './loading' import { tryShowLoading, tryHideLoading } from './loading'
import { getLinkToken, setLinkToken } from '@/utils/auth' import { getLinkToken, setLinkToken } from '@/utils/auth'
// import router from '@/router' // import router from '@/router'
const interruptTokenContineUrls = Config.interruptTokenContineUrls
const TokenKey = Config.TokenKey const TokenKey = Config.TokenKey
const RefreshTokenKey = Config.RefreshTokenKey const RefreshTokenKey = Config.RefreshTokenKey
const LinkTokenKey = Config.LinkTokenKey const LinkTokenKey = Config.LinkTokenKey
@ -16,7 +16,7 @@ const LinkTokenKey = Config.LinkTokenKey
const service = axios.create({ const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests // withCredentials: true, // send cookies when cross-domain requests
timeout: 0 // request timeout timeout: 10000 // request timeout
}) })
// request interceptor // request interceptor
@ -74,7 +74,7 @@ const checkAuth = response => {
}) })
} }
// token到期后自动续命 刷新token // token到期后自动续命 刷新token
if (response.headers[RefreshTokenKey]) { if (response.headers[RefreshTokenKey] && !interruptTokenContineUrls.some(item => response.config.url.indexOf(item) >= 0)) {
const refreshToken = response.headers[RefreshTokenKey] const refreshToken = response.headers[RefreshTokenKey]
store.dispatch('user/refreshToken', refreshToken) store.dispatch('user/refreshToken', refreshToken)
} }

16
frontend/src/views/chart/components/drag-item/DimensionItem.vue
View File

@ -7,7 +7,7 @@
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span> </span>
<span>{{ item.name }}</span> <span class="item-span-style" :title="item.name">{{ item.name }}</span>
</el-tag> </el-tag>
<el-dropdown v-else trigger="click" size="mini" @command="clickItem"> <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
@ -18,7 +18,8 @@
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span> </span>
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" /> <span class="item-span-style" :title="item.name">{{ item.name }}</span>
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
</el-tag> </el-tag>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item> <el-dropdown-item>
@ -192,10 +193,11 @@ export default {
text-align: left; text-align: left;
height: 24px; height: 24px;
line-height: 22px; line-height: 22px;
display: inline-block; display: flex;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
width: 159px;
} }
.item-axis:hover { .item-axis:hover {
@ -218,4 +220,12 @@ export default {
align-items: center; align-items: center;
width: 100% width: 100%
} }
.item-span-style{
display: inline-block;
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style> </style>

17
frontend/src/views/chart/components/drag-item/QuotaItem.vue
View File

@ -7,7 +7,7 @@
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span> </span>
<span>{{ item.name }}</span> <span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span> <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
</el-tag> </el-tag>
<el-dropdown v-else trigger="click" size="mini" @command="clickItem"> <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
@ -19,9 +19,9 @@
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span> </span>
<span>{{ item.name }}</span> <span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span> <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
<i class="el-icon-arrow-down el-icon--right" /> <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
</el-tag> </el-tag>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item> <el-dropdown-item>
@ -196,10 +196,11 @@ export default {
text-align: left; text-align: left;
height: 24px; height: 24px;
line-height: 22px; line-height: 22px;
display: inline-block; display: flex;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
width: 159px;
} }
.item-axis:hover { .item-axis:hover {
@ -222,4 +223,12 @@ export default {
align-items: center; align-items: center;
width: 100% width: 100%
} }
.item-span-style{
display: inline-block;
width: 80px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style> </style>

549
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -13,9 +13,9 @@
<span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span> <span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
</el-popover> </el-popover>
<span style="float: right;line-height: 40px;"> <span style="float: right;line-height: 40px;">
<el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs"> <!-- <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
{{ $t('chart.change_ds') }} <!-- {{ $t('chart.change_ds') }}-->
</el-button> <!-- </el-button>-->
<el-button size="mini" @click="closeEdit"> <el-button size="mini" @click="closeEdit">
{{ $t('commons.save') }} {{ $t('commons.save') }}
</el-button> </el-button>
@ -26,259 +26,274 @@
</span> </span>
</el-row> </el-row>
<el-row class="view-panel"> <el-row class="view-panel">
<el-col <el-tabs type="card" :stretch="true" class="tab-header">
style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;" <el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 360px">
> <el-row class="view-panel">
<div style="display: flex;align-items: center;justify-content: center;padding: 6px;"> <el-col
<el-input style="width: 180px;border-right: 1px solid #E6E6E6;"
v-model="searchField" >
size="mini" <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
:placeholder="$t('chart.search')" <el-input
prefix-icon="el-icon-search" v-model="searchField"
clearable size="mini"
/> :placeholder="$t('chart.search')"
<el-button :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 6px;" @click="editField" /> prefix-icon="el-icon-search"
</div> clearable
<div style="border-bottom: 1px solid #E6E6E6;" class="padding-lr field-height"> />
<span>{{ $t('chart.dimension') }}</span> <el-button :title="$t('dataset.edit_field')" :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="editField" />
<draggable <el-button :title="$t('chart.change_ds')" :disabled="!hasDataPermission('manage',param.privileges)" icon="el-icon-refresh" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="changeDs" />
v-model="dimensionData" </div>
:options="{group:{name: 'dimension',pull:'clone'},sort: true}" <div style="border-bottom: 1px solid #E6E6E6;" class="padding-lr field-height">
animation="300" <span>{{ $t('chart.dimension') }}</span>
:move="onMove" <draggable
class="drag-list" v-model="dimensionData"
:disabled="!hasDataPermission('manage',param.privileges)" :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
@end="end1" animation="300"
@start="start1" :move="onMove"
> class="drag-list"
<transition-group> :disabled="!hasDataPermission('manage',param.privileges)"
<span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name"> @end="end1"
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" /> @start="start1"
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" /> >
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <transition-group>
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> <span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
{{ item.name }} <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
</span> <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
</transition-group> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
</draggable> <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</div> {{ item.name }}
<div class="padding-lr field-height"> </span>
<span>{{ $t('chart.quota') }}</span> </transition-group>
<draggable </draggable>
v-model="quotaData" </div>
:options="{group:{name: 'quota',pull:'clone'},sort: true}" <div class="padding-lr field-height">
animation="300" <span>{{ $t('chart.quota') }}</span>
:move="onMove" <draggable
class="drag-list" v-model="quotaData"
:disabled="!hasDataPermission('manage',param.privileges)" :options="{group:{name: 'quota',pull:'clone'},sort: true}"
@end="end1" animation="300"
@start="start1" :move="onMove"
> class="drag-list"
<transition-group> :disabled="!hasDataPermission('manage',param.privileges)"
<span v-for="item in quotaData" :key="item.id" class="item" :title="item.name"> @end="end1"
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" /> @start="start1"
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" /> >
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <transition-group>
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> <span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
<span>{{ item.name }}</span> <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
</span> <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
</transition-group> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
</draggable> <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</div> <span>{{ item.name }}</span>
</el-col> </span>
</transition-group>
</draggable>
</div>
</el-col>
<el-col <el-col
style="height: 100%;width: 30%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;" style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
> >
<!-- <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">--> <!-- <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
<!-- <el-row>--> <!-- <el-row>-->
<!-- <span>{{ $t('chart.title') }}</span>--> <!-- <span>{{ $t('chart.title') }}</span>-->
<!-- <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>--> <!-- <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>-->
<!-- </el-row>--> <!-- </el-row>-->
<!-- <el-form>--> <!-- <el-form>-->
<!-- <el-form-item class="form-item">--> <!-- <el-form-item class="form-item">-->
<!-- <el-input--> <!-- <el-input-->
<!-- v-model="view.title"--> <!-- v-model="view.title"-->
<!-- size="mini"--> <!-- size="mini"-->
<!-- :placeholder="$t('chart.title')"--> <!-- :placeholder="$t('chart.title')"-->
<!-- prefix-icon="el-icon-search"--> <!-- prefix-icon="el-icon-search"-->
<!-- clearable--> <!-- clearable-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </el-form>--> <!-- </el-form>-->
<!-- </div>--> <!-- </div>-->
<div style="height: 25vh;overflow:auto" class="padding-lr"> <div style="height: 25vh;overflow:auto" class="padding-lr">
<span>{{ $t('chart.chart_type') }}</span> <span>{{ $t('chart.chart_type') }}</span>
<el-row> <el-row>
<div class="chart-type"> <div class="chart-type">
<!--这里要替换好看点的图标，UI标签可以重新定义--> <!--这里要替换好看点的图标，UI标签可以重新定义-->
<el-radio-group <el-radio-group
v-model="view.type" v-model="view.type"
style="width: 100%" style="width: 100%"
:disabled="!hasDataPermission('manage',param.privileges)" :disabled="!hasDataPermission('manage',param.privileges)"
@change="save(true,'chart',true)" @change="save(true,'chart',true)"
> >
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;"> <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="table-normal" label="table-normal"> <el-radio value="table-normal" label="table-normal">
<span :title="$t('chart.chart_table_normal')"> <span :title="$t('chart.chart_table_normal')">
<svg-icon icon-class="table-normal" class="chart-icon" /> <svg-icon icon-class="table-normal" class="chart-icon" />
</span>
</el-radio>
<el-radio value="text" label="text">
<span :title="$t('chart.chart_card')">
<svg-icon icon-class="text" class="chart-icon" />
</span>
</el-radio>
<el-radio value="bar" label="bar">
<span :title="$t('chart.chart_bar')">
<svg-icon icon-class="bar" class="chart-icon" />
</span>
</el-radio>
<el-radio value="bar-stack" label="bar-stack">
<span :title="$t('chart.chart_bar_stack')">
<svg-icon icon-class="bar-stack" class="chart-icon" />
</span>
</el-radio>
<el-radio value="bar-horizontal" label="bar-horizontal">
<span :title="$t('chart.chart_bar_horizontal')">
<svg-icon icon-class="bar-horizontal" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
<span :title="$t('chart.chart_bar_stack_horizontal')">
<svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
</span>
</el-radio>
<el-radio value="line" label="line">
<span :title="$t('chart.chart_line')">
<svg-icon icon-class="line" class="chart-icon" />
</span>
</el-radio>
<el-radio value="line-stack" label="line-stack">
<span :title="$t('chart.chart_line_stack')">
<svg-icon icon-class="line-stack" class="chart-icon" />
</span>
</el-radio>
<el-radio value="pie" label="pie">
<span :title="$t('chart.chart_pie')">
<svg-icon icon-class="pie" class="chart-icon" />
</span>
</el-radio>
<el-radio value="pie-rose" label="pie-rose">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="funnel" label="funnel">
<span :title="$t('chart.chart_funnel')">
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
</el-radio>
<el-radio value="radar" label="radar">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
</span>
</el-radio>
<el-radio value="gauge" label="gauge">
<span :title="$t('chart.chart_gauge')">
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
</el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</el-radio-group>
</div>
</el-row>
<el-row style="color: #909399;">
<span>
<span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge'))">
Tips: {{ $t('chart.only_one_quota') }}
</span> </span>
</el-radio> <!-- <span v-show="chart.type && (chart.type.includes('text'))">-->
<el-radio value="text" label="text"> <!-- Tips: {{ $t('chart.only_one_result') }}-->
<span :title="$t('chart.chart_card')"> <!-- </span>-->
<svg-icon icon-class="text" class="chart-icon" /> <!-- <span v-show="chart.type && chart.type.includes('gauge')">-->
</span> <!-- Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
</el-radio> <!-- </span>-->
<el-radio value="bar" label="bar"> </span>
<span :title="$t('chart.chart_bar')"> </el-row>
<svg-icon icon-class="bar" class="chart-icon" /> </div>
</span> <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
</el-radio> <el-row>
<el-radio value="bar-stack" label="bar-stack"> <el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
<span :title="$t('chart.chart_bar_stack')"> <span style="width: 80px;text-align: right;">{{ $t('chart.dimension') }}</span>
<svg-icon icon-class="bar-stack" class="chart-icon" /> <draggable
</span> v-model="view.xaxis"
</el-radio> :disabled="!hasDataPermission('manage',param.privileges)"
<el-radio value="bar-horizontal" label="bar-horizontal"> group="dimension"
<span :title="$t('chart.chart_bar_horizontal')"> animation="300"
<svg-icon icon-class="bar-horizontal" class="chart-icon" /> :move="onMove"
</span> style="padding:2px 0 0 0;width:100%;height: 100%;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
</el-radio> @end="end2"
</div> >
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;"> <transition-group class="draggable-group">
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"> <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
<span :title="$t('chart.chart_bar_stack_horizontal')"> </transition-group>
<svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /> </draggable>
</span> </el-row>
</el-radio> <el-row class="padding-lr">
<el-radio value="line" label="line"> <span style="width: 80px;text-align: right;">{{ $t('chart.quota') }}</span>
<span :title="$t('chart.chart_line')"> <draggable
<svg-icon icon-class="line" class="chart-icon" /> v-model="view.yaxis"
</span> :disabled="!hasDataPermission('manage',param.privileges)"
</el-radio> group="quota"
<el-radio value="line-stack" label="line-stack"> animation="300"
<span :title="$t('chart.chart_line_stack')"> :move="onMove"
<svg-icon icon-class="line-stack" class="chart-icon" /> style="padding:2px 0 0 0;width:100%;height: 100%;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
</span> @end="end2"
</el-radio> >
<el-radio value="pie" label="pie"> <transition-group class="draggable-group">
<span :title="$t('chart.chart_pie')"> <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
<svg-icon icon-class="pie" class="chart-icon" /> </transition-group>
</span> </draggable>
</el-radio> </el-row>
<el-radio value="pie-rose" label="pie-rose"> <div class="padding-lr filter-class">
<span :title="$t('chart.chart_pie_rose')"> <span>{{ $t('chart.result_filter') }}</span>
<svg-icon icon-class="pie-rose" class="chart-icon" /> <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">
</span> {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" />
</el-radio> </el-button>
</div> </div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;"> </el-row>
<el-radio value="funnel" label="funnel"> </div>
<span :title="$t('chart.chart_funnel')"> </el-col>
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
</el-radio>
<el-radio value="radar" label="radar">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
</span>
</el-radio>
<el-radio value="gauge" label="gauge">
<span :title="$t('chart.chart_gauge')">
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
</el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</el-radio-group>
</div>
</el-row> </el-row>
<el-row style="color: #909399;"> </el-tab-pane>
<span> <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
<span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge'))"> <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;" class="attr-style">
Tips: {{ $t('chart.only_one_quota') }} <el-row class="padding-lr">
</span> <span>{{ $t('chart.style_priority') }}</span>
<!-- <span v-show="chart.type && (chart.type.includes('text'))">--> <el-row>
<!-- Tips: {{ $t('chart.only_one_result') }}--> <el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
<!-- </span>--> <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<!-- <span v-show="chart.type && chart.type.includes('gauge')">--> <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
<!-- Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}--> </el-radio-group>
<!-- </span>--> </el-row>
</span>
</el-row>
</div>
<div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
<el-row class="padding-lr">
<span>{{ $t('chart.style_priority') }}</span>
<el-row>
<el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-row> </el-row>
</el-row> <el-row class="padding-lr">
<el-tabs type="card" :stretch="true" class="tab-header"> <span>{{ $t('chart.shape_attr') }}</span>
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr"> <el-row>
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" /> <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" /> <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" /> <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" /> <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-tab-pane> </el-row>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr"> </el-row>
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" /> <el-row class="padding-lr">
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" /> <span>{{ $t('chart.module_style') }}</span>
<split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" /> <el-row>
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" /> <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" /> <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" /> <split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
</el-tab-pane> <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
</el-tabs> <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
</div> <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
<div style="height:60px;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class"> </el-row>
<span>{{ $t('chart.result_filter') }}</span> </el-row>
<el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter"> </div>
{{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" /> </el-tab-pane>
</el-button> </el-tabs>
</div>
</el-col>
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;"> <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
<el-row style="width: 100%;height: 100%;" class="padding-lr"> <el-row style="width: 100%;height: 100%;" class="padding-lr">
<el-row style="margin-top: 10px;height: 74px;">
<el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" style="display:flex;height: 32px;">
<span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.dimension') }}</span>
<draggable
v-model="view.xaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="dimension"
animation="300"
:move="onMove"
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@end="end2"
>
<transition-group class="draggable-group">
<dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
</transition-group>
</draggable>
</el-row>
<el-row style="display:flex;height: 32px;margin-top: 10px;">
<span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.quota') }}</span>
<draggable
v-model="view.yaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="quota"
animation="300"
:move="onMove"
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@end="end2"
>
<transition-group class="draggable-group">
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
</transition-group>
</draggable>
</el-row>
</el-row>
<div ref="imageWrapper" style="height: 100%"> <div ref="imageWrapper" style="height: 100%">
<chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" /> <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
<table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" /> <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
@ -420,7 +435,7 @@ import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
import DimensionFilterEditor from '../components/filter/DimensionFilterEditor' import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
import TableNormal from '../components/table/TableNormal' import TableNormal from '../components/table/TableNormal'
import LabelNormal from '../components/normal/LabelNormal' import LabelNormal from '../components/normal/LabelNormal'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvasde'
import TableSelector from './TableSelector' import TableSelector from './TableSelector'
import FieldEdit from '../../dataset/data/FieldEdit' import FieldEdit from '../../dataset/data/FieldEdit'
@ -506,7 +521,7 @@ export default {
watch: { watch: {
'param': function() { 'param': function() {
if (this.param.optType === 'new') { if (this.param.optType === 'new') {
//
} else { } else {
this.getData(this.param.id) this.getData(this.param.id)
} }
@ -762,8 +777,8 @@ export default {
// 左边往右边拖动时的事件 // 左边往右边拖动时的事件
start1(e) { start1(e) {
// console.log(e) // console.log(e)
e.clone.className = 'item-on-move' e.clone.className = 'item'
e.item.className = 'item-on-move' e.item.className = 'item'
}, },
end1(e) { end1(e) {
// console.log(e) // console.log(e)
@ -1046,7 +1061,8 @@ export default {
}, },
changeDs() { changeDs() {
this.changeDsTitle = this.$t('chart.change_ds') + '[' + this.table.name + ']' const dialogTitle = (this.table && this.table.name) ? ('[' + this.table.name + ']') : ''
this.changeDsTitle = this.$t('chart.change_ds') + dialogTitle
this.selectTableFlag = true this.selectTableFlag = true
}, },
@ -1179,9 +1195,15 @@ export default {
.tab-header>>>.el-tabs__nav-scroll{ .tab-header>>>.el-tabs__nav-scroll{
padding-left: 0!important; padding-left: 0!important;
} }
.tab-header>>>.el-tabs__header{
margin: 0!important;
}
.tab-header>>>.el-tabs__content{
height: 100%;
}
.draggable-group { .draggable-group {
display: inline-block; display: block;
width: 100%; width: 100%;
height: calc(100% - 6px); height: calc(100% - 6px);
} }
@ -1203,7 +1225,7 @@ export default {
} }
.el-radio{ .el-radio{
margin:6px; margin:5px;
} }
.el-radio>>>.el-radio__label{ .el-radio>>>.el-radio__label{
@ -1211,7 +1233,7 @@ export default {
} }
.attr-style{ .attr-style{
height: calc(100vh - 56px - 25vh - 40px - 62px - 60px - 20px); height: calc(100vh - 56px - 25vh - 40px - 60px);
} }
.attr-selector{ .attr-selector{
@ -1238,11 +1260,11 @@ export default {
} }
.chart-class{ .chart-class{
height: calc(100% - 84px); height: 100%;
padding: 10px; padding: 10px;
} }
.table-class{ .table-class{
height: calc(100% - 104px); height: calc(100% - 20px);
margin: 10px; margin: 10px;
} }
@ -1275,4 +1297,13 @@ export default {
.field-height{ .field-height{
height: calc(50% - 20px); height: calc(50% - 20px);
} }
.padding-tab{
padding: 0;
height: 100%;
}
.collapse-style>>>.el-collapse-item__header{
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
}
</style> </style>

2
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -76,7 +76,7 @@
import Preview from '@/components/canvas/components/Editor/Preview' import Preview from '@/components/canvas/components/Editor/Preview'
import SaveToTemplate from '@/views/panel/list/SaveToTemplate' import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvasde'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine' import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
import bus from '@/utils/bus' import bus from '@/utils/bus'