center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(仪表板): 仪表板视图刷新增加开关控制

Browse Source
This commit is contained in:
wangjiahao 2022-11-15 16:52:40 +08:00
parent 6919b3ffca
commit 08271e7bfc
12 changed files with 113 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/canvas/DeCanvas.vue
View File

@ -8,7 +8,7 @@
@mouseup="deselectCurComponent"
@scroll="canvasScroll"
>
<slot name="optBar"/>
<slot name="optBar" />
<de-editor
:ref="editorRefName"
:canvas-style-data="canvasStyleData"

2
frontend/src/components/canvas/components/editor/EditBar.vue
View File

@ -137,7 +137,7 @@
:target="curComponent.hyperlinks.openMode "
:href="curComponent.hyperlinks.content "
>
<i class="icon iconfont icon-com-jump"/>
<i class="icon iconfont icon-com-jump" />
</a>
</span>

24
frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -428,19 +428,21 @@ export default {
},
canvasStyleDataInit() {
// 数据刷新计时器
this.searchCount = 0
this.timer && clearInterval(this.timer)
let refreshTime = 300000
if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
if (this.canvasStyleData.refreshUnit === 'second') {
refreshTime = this.canvasStyleData.refreshTime * 1000
} else {
refreshTime = this.canvasStyleData.refreshTime * 60000
if (this.canvasStyleData.refreshViewEnable) {
this.searchCount = 0
this.timer && clearInterval(this.timer)
let refreshTime = 300000
if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
if (this.canvasStyleData.refreshUnit === 'second') {
refreshTime = this.canvasStyleData.refreshTime * 1000
} else {
refreshTime = this.canvasStyleData.refreshTime * 60000
}
}
this.timer = setInterval(() => {
this.searchCount++
}, refreshTime)
}
this.timer = setInterval(() => {
this.searchCount++
}, refreshTime)
},
changeStyleWithScale,
getStyle,

16
frontend/src/components/canvas/utils/utils.js
View File

@ -1,11 +1,10 @@
import {
BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
BASE_MOBILE_STYLE,
COMMON_BACKGROUND_NONE,
HYPERLINKS
} from '@/components/canvas/customComponent/component-list'
import {
ApplicationContext
} from '@/utils/ApplicationContext'
import { ApplicationContext } from '@/utils/ApplicationContext'
import { uuid } from 'vue-uuid'
import store from '@/store'
import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
@ -49,6 +48,7 @@ export function toTop(arr, i, j) {
export function toBottom(arr, i) {
arr.unshift(arr.splice(i, 1)[0])
}
export function $(selector) {
return document.querySelector(selector)
}
@ -80,6 +80,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.refreshTime = (componentStyle.refreshTime || 5)
componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
componentStyle.refreshViewEnable = (componentStyle.refreshViewEnable === undefined ? true : componentStyle.refreshViewEnable)
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
componentStyle.chartInfo = (componentStyle.chartInfo || deepCopy(PANEL_CHART_INFO))
componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
@ -209,8 +210,11 @@ export function exportImg(imgName) {
}
export function dataURLToBlob(dataurl) { // ie 图片转格式
const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n)
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}

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

@ -1865,6 +1865,18 @@ export default {
sure_bt: 'Confirm'
},
panel: {
board: 'Border',
text: 'Text',
board_background: 'Background',
title_color: 'Title color',
input_style: 'Input box style (color)',
overall_setting: 'Overall setting',
panel_background: 'Panel background',
component_color: 'Component color',
chart_title: 'Chart title',
filter_component: 'Filter component',
enable_refresh_view: 'Enable refresh',
enable_view_loading: 'View loading prompt',
image_size_tips: 'Please do not exceed 15M in the picture',
image_add_tips: 'Only pictures can be inserted',
watermark: 'Watermark',

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

@ -1865,6 +1865,18 @@ export default {
sure_bt: '確定'
},
panel: {
board: '邊框',
text: '文字',
board_background: '背景',
title_color: '標題顏色',
input_style: '輸入框樣式(顏色)',
overall_setting: '整體配置',
panel_background: '儀表板背景',
component_color: '組件配色',
chart_title: '圖表標題',
filter_component: '過濾組件',
enable_refresh_view: '開啟刷新',
enable_view_loading: '視圖加載提示',
image_size_tips: '圖片請不要大於15M',
image_add_tips: '只能插入圖片',
watermark: '水印',

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

@ -1865,6 +1865,18 @@ export default {
sure_bt: '确定'
},
panel: {
board: '边框',
text: '文字',
board_background: '背景',
title_color: '标题颜色',
input_style: '输入框样式(颜色)',
overall_setting: '整体配置',
panel_background: '仪表板背景',
component_color: '组件配色',
chart_title: '图表标题',
filter_component: '过滤组件',
enable_refresh_view: '开启刷新',
enable_view_loading: '视图加载提示',
image_size_tips: '图片请不要大于15M',
image_add_tips: '只能插入图片',
watermark: '水印',

2
frontend/src/views/panel/panel.js
View File

@ -2,6 +2,7 @@
import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { deepCopy } from '@/components/canvas/utils/utils'
import { COMMON_BACKGROUND_BASE } from '@/components/canvas/customComponent/component-list'
export const TAB_COMMON_STYLE = {
headFontColor: '#000000',
headFontActiveColor: '#000000',
@ -60,6 +61,7 @@ export const CANVAS_STYLE = {
showGrid: false,
matrixBase: 4 // 当前matrix的基数 （是pcMatrixCount的几倍）
}, // 辅助设计
refreshViewEnable: true, // 开启视图刷新（默认开启）
refreshViewLoading: true, // 仪表板视图loading提示
refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
refreshTime: 5, // 仪表板刷新时间 默认5分钟

24
frontend/src/views/panel/subjectSetting/index.vue
View File

@ -21,7 +21,7 @@
@change="handleChange"
>
<el-collapse-item
:title="'整体配置'"
:title="$t('panel.overall_setting')"
name="panel"
>
<el-row class="selector-div">
@ -29,31 +29,31 @@
</el-row>
</el-collapse-item>
<el-collapse-item
:title="'仪表板背景'"
:title="$t('panel.panel_background')"
name="panelBackground"
>
<background-selector />
</el-collapse-item>
<el-collapse-item
:title="'组件样式'"
:title="$t('panel.component_style')"
name="componentStyle"
>
<component-style />
</el-collapse-item>
<el-collapse-item
:title="'组件配色'"
:title="$t('panel.component_color')"
name="graphical"
>
<panel-color-selector @onColorChange="onColorChange" />
</el-collapse-item>
<el-collapse-item
:title="'图表标题'"
:title="$t('panel.chart_title')"
name="table"
>
<view-title @onTextChange="onTextChange" />
</el-collapse-item>
<el-collapse-item
:title="'过滤组件'"
:title="$t('panel.filter_component')"
name="filterComponent"
>
<FilterStyleSelector />
@ -204,21 +204,21 @@ export default {
font-weight: 700
}
.theme-slider-position{
.theme-slider-position {
height: 1px;
position: absolute;
left: 15px;
right: 15px;
top: 40px;
box-sizing:border-box;
box-sizing: border-box;
border-bottom: 1px solid #e8eaed
}
::v-deep .el-collapse-item__header{
font-weight: 500!important;
font-size: 14px!important;
::v-deep .el-collapse-item__header {
font-weight: 500 !important;
font-size: 14px !important;
color: var(--TextPrimary, #1F2329);
padding: 0!important;
padding: 0 !important;
}
</style>

2
frontend/src/views/panel/subjectSetting/panelStyle/BackgroundSelector.vue
View File

@ -45,7 +45,7 @@
:on-remove="handleRemove"
:file-list="fileList"
>
<i class="el-icon-plus"/>
<i class="el-icon-plus" />
</el-upload>
<el-dialog
top="25vh"

44
frontend/src/views/panel/subjectSetting/panelStyle/FilterStyleSelector.vue
View File

@ -21,7 +21,8 @@
<el-radio-button
:disabled="filterForm.vertical === 'center'"
label="center"
>{{ $t('chart.text_pos_center') }}</el-radio-button>
>{{ $t('chart.text_pos_center') }}
</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
@ -38,11 +39,12 @@
<el-radio-button
:disabled="filterForm.horizontal === 'center'"
label="center"
>{{ $t('chart.text_pos_center') }}</el-radio-button>
>{{ $t('chart.text_pos_center') }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
:label="'标题颜色'"
:label="$t('panel.title_color')"
class="form-item"
>
<el-color-picker
@ -52,13 +54,13 @@
@change="themeChange('color')"
/>
</el-form-item>
<el-divider>输入框样式(颜色)</el-divider>
<el-divider>{{ $t('panel.input_style') }}</el-divider>
<el-row style="height: 40px;overflow: hidden;">
<el-col
:span="4"
style="padding-left: 10px;padding-top: 8px"
>
边框
{{ $t('panel.board') }}
</el-col>
<el-col
:span="4"
@ -76,7 +78,7 @@
:span="4"
style="padding-left: 10px;padding-top: 8px"
>
文字
{{ $t('panel.text') }}
</el-col>
<el-col
:span="4"
@ -94,7 +96,7 @@
:span="4"
style="padding-left: 10px;padding-top: 8px"
>
背景
{{ $t('panel.board_background') }}
</el-col>
<el-col
:span="4"
@ -123,8 +125,7 @@ import bus from '@/utils/bus'
export default {
name: 'FilterStyleSelector',
props: {
},
props: {},
data() {
return {
filterForm: {},
@ -159,7 +160,7 @@ export default {
</script>
<style scoped>
.shape-item{
.shape-item {
padding: 6px;
border: none;
width: 100%;
@ -167,33 +168,40 @@ export default {
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label{
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item{
.el-select-dropdown__item {
padding: 0 20px;
}
span{
span {
font-size: 12px
}
.el-form-item{
.el-form-item {
margin-bottom: 6px;
}
.switch-style{
.switch-style {
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
.color-picker-style {
cursor: pointer;
z-index: 1003;
}
.el-divider__text{
.el-divider__text {
font-size: 8px;
font-weight: 400;
color: rgb(144, 147, 153);

12
frontend/src/views/panel/subjectSetting/panelStyle/OverallSetting.vue
View File

@ -38,12 +38,20 @@
<el-row class="margin-top20">
<el-row class="custom-item-text-row">
<span class="custom-item-text bl"> {{ $t('panel.refresh_frequency') }}</span>
<span class="custom-item-text bl">
<el-checkbox
v-model="overallSettingForm.refreshViewEnable"
class="el-input-refresh-loading"
@change="themeChange"
>{{ $t('panel.enable_refresh_view') }}</el-checkbox>
</span>
<span class="custom-item-text br">
<el-checkbox
v-model="overallSettingForm.refreshViewLoading"
class="el-input-refresh-loading"
:disabled="!overallSettingForm.refreshViewEnable"
@change="themeChange"
>视图加载提示</el-checkbox>
>{{ $t('panel.enable_view_loading') }}</el-checkbox>
</span>
</el-row>
<el-row class="function-area">
@ -55,12 +63,14 @@
controls-position="right"
:min="1"
:max="3600"
:disabled="!overallSettingForm.refreshViewEnable"
@change="themeChange"
/>
<el-select
v-model="overallSettingForm.refreshUnit"
class="el-input-refresh-unit margin-left8"
size="mini"
:disabled="!overallSettingForm.refreshViewEnable"
@change="themeChange"
>
<el-option