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

refactor(图表): 优化指标卡、过滤组件等在移动端的适配

Browse Source
This commit is contained in:
wangjiahao 2024-11-03 13:37:33 +08:00
parent d0e9ef9973
commit ea3439ac55
6 changed files with 224 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/core-frontend/src/store/modules/data-visualization/snapshot.ts
View File

@ -164,7 +164,8 @@ export const snapshotStore = defineStore('snapshot', {
recordSnapshot() { recordSnapshot() {
this.styleChangeTimes = ++this.styleChangeTimes this.styleChangeTimes = ++this.styleChangeTimes
if (dataPrepareState.value) { // 移动端设计时暂不保存镜像
if (dataPrepareState.value && !mobileInPc) {
const snapshotComponentData = deepCopy(componentData.value) const snapshotComponentData = deepCopy(componentData.value)
dvMainStore.removeGroupArea(snapshotComponentData) dvMainStore.removeGroupArea(snapshotComponentData)
// 添加新的快照 // 添加新的快照

8
core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
View File

@ -409,6 +409,7 @@ watch(
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
:quota-fields="props.quotaData" :quota-fields="props.quotaData"
:mobile-in-pc="mobileInPc"
@onMiscChange="onMiscChange" @onMiscChange="onMiscChange"
/> />
</el-collapse-item> </el-collapse-item>
@ -445,9 +446,12 @@ watch(
@onLabelChange="onLabelChange" @onLabelChange="onLabelChange"
/> />
</collapse-switch-item> </collapse-switch-item>
<!-- tooltip 为鼠标悬停 移动端看不到效果 不再单独配置 --> <!-- tooltip 为鼠标悬停 移动端table看不到效果 不再单独配置 -->
<collapse-switch-item <collapse-switch-item
v-if="showProperties('tooltip-selector') && !mobileInPc" v-if="
showProperties('tooltip-selector') &&
(!mobileInPc || (mobileInPc && chart.type.indexOf('table') === -1))
"
v-model="chart.customAttr.tooltip.show" v-model="chart.customAttr.tooltip.show"
:themes="themes" :themes="themes"
:change-model="chart.customAttr.tooltip" :change-model="chart.customAttr.tooltip"

18
core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
View File

@ -126,6 +126,7 @@ const handleCurrentPlaceholder = val => {
obj.placeholder = '' obj.placeholder = ''
} }
currentSearch.value = obj currentSearch.value = obj
snapshotStore.recordSnapshotCacheToMobile('propValue')
} }
const init = () => { const init = () => {
@ -182,8 +183,20 @@ const checkBold = type => {
chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'bold' chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'bold'
} }
const handleCurrentPlaceholderCustomChange = () => {
if (mobileInPc.value) {
//移动端设计
useEmitt().emitter.emit('onMobileStatusChange', {
type: 'componentStyleChange',
value: { type: 'renderChart', component: JSON.parse(JSON.stringify(chart.value)) }
})
} else {
snapshotStore.recordSnapshotCache()
}
}
const handleCurrentPlaceholderChange = () => { const handleCurrentPlaceholderChange = () => {
snapshotStore.recordSnapshotCache() snapshotStore.recordSnapshotCacheToMobile('propValue')
} }
const checkItalic = type => { const checkItalic = type => {
@ -409,6 +422,7 @@ initParams()
<el-checkbox <el-checkbox
:effect="themes" :effect="themes"
size="small" size="small"
@change="handleCurrentPlaceholderCustomChange"
v-model="chart.customStyle.component.placeholderShow" v-model="chart.customStyle.component.placeholderShow"
> >
提示词 提示词
@ -427,10 +441,12 @@ initParams()
is-custom is-custom
v-model="chart.customStyle.component.text" v-model="chart.customStyle.component.text"
:disabled="!chart.customStyle.component.placeholderShow" :disabled="!chart.customStyle.component.placeholderShow"
@change="handleCurrentPlaceholderCustomChange"
:predefine="predefineColors" :predefine="predefineColors"
/> />
<el-input-number <el-input-number
v-model="chart.customStyle.component.placeholderSize" v-model="chart.customStyle.component.placeholderSize"
@change="handleCurrentPlaceholderCustomChange"
:min="10" :min="10"
:max="20" :max="20"
style="margin-left: 8px" style="margin-left: 8px"

388
core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
View File

@ -17,8 +17,9 @@ const props = withDefaults(
themes?: EditorTheme themes?: EditorTheme
quotaFields: Array<any> quotaFields: Array<any>
propertyInner?: Array<string> propertyInner?: Array<string>
mobileInPc?: boolean
}>(), }>(),
{ themes: 'dark' } { themes: 'dark', mobileInPc: false }
) )
useEmitt({ useEmitt({
@ -391,202 +392,205 @@ onMounted(() => {
</el-row> </el-row>
<!--gauge-begin--> <!--gauge-begin-->
<el-form-item <template v-if="!mobileInPc">
v-show="showProperty('gaugeMinType')" <el-form-item
class="form-item margin-bottom-8" v-show="showProperty('gaugeMinType')"
:label="t('chart.min')" class="form-item margin-bottom-8"
:class="'form-item-' + themes" :label="t('chart.min')"
> :class="'form-item-' + themes"
<el-radio-group
:effect="themes"
v-model="state.miscForm.gaugeMinType"
size="small"
@change="changeQuotaField('min')"
> >
<el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio> <el-radio-group
<el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio> :effect="themes"
</el-radio-group> v-model="state.miscForm.gaugeMinType"
</el-form-item> size="small"
<el-form-item @change="changeQuotaField('min')"
v-if="showProperty('gaugeMin') && state.miscForm.gaugeMinType === 'fix'" >
class="form-item" <el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio>
:class="'form-item-' + themes" <el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio>
> </el-radio-group>
<el-input-number </el-form-item>
:effect="themes" <el-form-item
v-model="state.miscForm.gaugeMin" v-if="showProperty('gaugeMin') && state.miscForm.gaugeMinType === 'fix'"
size="small" class="form-item"
controls-position="right" :class="'form-item-' + themes"
@change="changeMisc('gaugeMin')" >
/> <el-input-number
</el-form-item> :effect="themes"
<el-row v-model="state.miscForm.gaugeMin"
:gutter="8" size="small"
v-if="showProperty('gaugeMinField') && state.miscForm.gaugeMinType === 'dynamic'" controls-position="right"
> @change="changeMisc('gaugeMin')"
<el-col :span="12"> />
<el-form-item class="form-item" :class="'form-item-' + themes"> </el-form-item>
<el-select <el-row
:effect="themes" :gutter="8"
:placeholder="t('chart.field')" v-if="showProperty('gaugeMinField') && state.miscForm.gaugeMinType === 'dynamic'"
:class="{ 'invalid-field': !validMinField }" >
v-model="state.miscForm.gaugeMinField.id" <el-col :span="12">
@change="changeQuotaField('min', true)" <el-form-item class="form-item" :class="'form-item-' + themes">
> <el-select
<el-option :effect="themes"
class="series-select-option" :placeholder="t('chart.field')"
v-for="item in state.quotaData" :class="{ 'invalid-field': !validMinField }"
:key="item.id" v-model="state.miscForm.gaugeMinField.id"
:label="item.name" @change="changeQuotaField('min', true)"
:value="item.id"
> >
<el-icon style="margin-right: 8px"> <el-option
<Icon :className="`field-icon-${fieldType[item.deType]}`" class="series-select-option"
><component v-for="item in state.quotaData"
class="svg-icon" :key="item.id"
:class="`field-icon-${fieldType[item.deType]}`" :label="item.name"
:is="iconFieldMap[fieldType[item.deType]]" :value="item.id"
></component >
></Icon> <el-icon style="margin-right: 8px">
</el-icon> <Icon :className="`field-icon-${fieldType[item.deType]}`"
{{ item.name }} ><component
</el-option> class="svg-icon"
</el-select> :class="`field-icon-${fieldType[item.deType]}`"
</el-form-item> :is="iconFieldMap[fieldType[item.deType]]"
</el-col> ></component
<el-col :span="12"> ></Icon>
<el-form-item class="form-item" :class="'form-item-' + themes"> </el-icon>
<el-select {{ item.name }}
:effect="themes" </el-option>
:placeholder="t('chart.summary')" </el-select>
v-model="state.miscForm.gaugeMinField.summary" </el-form-item>
@change="changeQuotaField('min')" </el-col>
> <el-col :span="12">
<el-option v-if="validMinField" key="sum" value="sum" :label="t('chart.sum')" /> <el-form-item class="form-item" :class="'form-item-' + themes">
<el-option v-if="validMinField" key="avg" value="avg" :label="t('chart.avg')" /> <el-select
<el-option v-if="validMinField" key="max" value="max" :label="t('chart.max')" /> :effect="themes"
<el-option v-if="validMinField" key="min" value="min" :label="t('chart.min')" /> :placeholder="t('chart.summary')"
<el-option v-model="state.miscForm.gaugeMinField.summary"
v-if="validMinField" @change="changeQuotaField('min')"
key="stddev_pop" >
value="stddev_pop" <el-option v-if="validMinField" key="sum" value="sum" :label="t('chart.sum')" />
:label="t('chart.stddev_pop')" <el-option v-if="validMinField" key="avg" value="avg" :label="t('chart.avg')" />
/> <el-option v-if="validMinField" key="max" value="max" :label="t('chart.max')" />
<el-option <el-option v-if="validMinField" key="min" value="min" :label="t('chart.min')" />
v-if="validMinField" <el-option
key="var_pop" v-if="validMinField"
value="var_pop" key="stddev_pop"
:label="t('chart.var_pop')" value="stddev_pop"
/> :label="t('chart.stddev_pop')"
<el-option key="count" value="count" :label="t('chart.count')" /> />
<el-option <el-option
v-if="state.minField.id !== '-1'" v-if="validMinField"
key="count_distinct" key="var_pop"
value="count_distinct" value="var_pop"
:label="t('chart.count_distinct')" :label="t('chart.var_pop')"
/> />
</el-select> <el-option key="count" value="count" :label="t('chart.count')" />
</el-form-item> <el-option
</el-col> v-if="state.minField.id !== '-1'"
</el-row> key="count_distinct"
value="count_distinct"
:label="t('chart.count_distinct')"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item <el-form-item
v-show="showProperty('gaugeMaxType')" v-show="showProperty('gaugeMaxType')"
class="form-item margin-bottom-8" class="form-item margin-bottom-8"
:label="t('chart.max')" :label="t('chart.max')"
:class="'form-item-' + themes" :class="'form-item-' + themes"
>
<el-radio-group
v-model="state.miscForm.gaugeMaxType"
size="small"
@change="changeQuotaField('max')"
> >
<el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio> <el-radio-group
<el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio> v-model="state.miscForm.gaugeMaxType"
</el-radio-group> size="small"
</el-form-item> @change="changeQuotaField('max')"
<el-form-item >
v-if="showProperty('gaugeMax') && state.miscForm.gaugeMaxType === 'fix'" <el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio>
class="form-item" <el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio>
:class="'form-item-' + themes" </el-radio-group>
> </el-form-item>
<el-input-number <el-form-item
:effect="themes" v-if="showProperty('gaugeMax') && state.miscForm.gaugeMaxType === 'fix'"
v-model="state.miscForm.gaugeMax" class="form-item"
size="small" :class="'form-item-' + themes"
controls-position="right" >
@blur="changeMaxValidate('gaugeMax')" <el-input-number
/> :effect="themes"
</el-form-item> v-model="state.miscForm.gaugeMax"
<el-row size="small"
:gutter="8" controls-position="right"
v-if="showProperty('gaugeMaxField') && state.miscForm.gaugeMaxType === 'dynamic'" @blur="changeMaxValidate('gaugeMax')"
> />
<el-col :span="12"> </el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes"> <el-row
<el-select :gutter="8"
:effect="themes" v-if="showProperty('gaugeMaxField') && state.miscForm.gaugeMaxType === 'dynamic'"
:placeholder="t('chart.field')" >
:class="{ 'invalid-field': !validMaxField }" <el-col :span="12">
v-model="state.miscForm.gaugeMaxField.id" <el-form-item class="form-item" :class="'form-item-' + themes">
@change="changeQuotaField('max', true)" <el-select
> :effect="themes"
<el-option :placeholder="t('chart.field')"
class="series-select-option" :class="{ 'invalid-field': !validMaxField }"
v-for="item in state.quotaData" v-model="state.miscForm.gaugeMaxField.id"
:key="item.id" @change="changeQuotaField('max', true)"
:label="item.name"
:value="item.id"
> >
<el-icon style="margin-right: 8px"> <el-option
<Icon :className="`field-icon-${fieldType[item.deType]}`" class="series-select-option"
><component v-for="item in state.quotaData"
:class="`field-icon-${fieldType[item.deType]}`" :key="item.id"
class="svg-icon" :label="item.name"
:is="iconFieldMap[fieldType[item.deType]]" :value="item.id"
></component >
></Icon> <el-icon style="margin-right: 8px">
</el-icon> <Icon :className="`field-icon-${fieldType[item.deType]}`"
{{ item.name }} ><component
</el-option> :class="`field-icon-${fieldType[item.deType]}`"
</el-select> class="svg-icon"
</el-form-item> :is="iconFieldMap[fieldType[item.deType]]"
</el-col> ></component
<el-col :span="12"> ></Icon>
<el-form-item class="form-item" :class="'form-item-' + themes"> </el-icon>
<el-select {{ item.name }}
:effect="themes" </el-option>
v-model="state.miscForm.gaugeMaxField.summary" </el-select>
:placeholder="t('chart.summary')" </el-form-item>
@change="changeQuotaField('max')" </el-col>
> <el-col :span="12">
<el-option v-if="validMaxField" key="sum" value="sum" :label="t('chart.sum')" /> <el-form-item class="form-item" :class="'form-item-' + themes">
<el-option v-if="validMaxField" key="avg" value="avg" :label="t('chart.avg')" /> <el-select
<el-option v-if="validMaxField" key="max" value="max" :label="t('chart.max')" /> :effect="themes"
<el-option v-if="validMaxField" key="min" value="min" :label="t('chart.min')" /> v-model="state.miscForm.gaugeMaxField.summary"
<el-option :placeholder="t('chart.summary')"
v-if="validMaxField" @change="changeQuotaField('max')"
key="stddev_pop" >
value="stddev_pop" <el-option v-if="validMaxField" key="sum" value="sum" :label="t('chart.sum')" />
:label="t('chart.stddev_pop')" <el-option v-if="validMaxField" key="avg" value="avg" :label="t('chart.avg')" />
/> <el-option v-if="validMaxField" key="max" value="max" :label="t('chart.max')" />
<el-option <el-option v-if="validMaxField" key="min" value="min" :label="t('chart.min')" />
v-if="validMaxField" <el-option
key="var_pop" v-if="validMaxField"
value="var_pop" key="stddev_pop"
:label="t('chart.var_pop')" value="stddev_pop"
/> :label="t('chart.stddev_pop')"
<el-option key="count" value="count" :label="t('chart.count')" /> />
<el-option <el-option
v-if="state.maxField.id !== '-1'" v-if="validMaxField"
key="count_distinct" key="var_pop"
value="count_distinct" value="var_pop"
:label="t('chart.count_distinct')" :label="t('chart.var_pop')"
/> />
</el-select> <el-option key="count" value="count" :label="t('chart.count')" />
</el-form-item> <el-option
</el-col> v-if="state.maxField.id !== '-1'"
</el-row> key="count_distinct"
value="count_distinct"
:label="t('chart.count_distinct')"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</template>
<!--gauge-end--> <!--gauge-end-->
<!--liquid-begin--> <!--liquid-begin-->

2
core/core-frontend/src/views/mobile/panel/index.vue
View File

@ -83,7 +83,7 @@ const hanedleMessage = event => {
} else if (type === 'updateTitle') { } else if (type === 'updateTitle') {
mobileViewStyleSwitch(component) mobileViewStyleSwitch(component)
useEmitt().emitter.emit('updateTitle-' + component.id) useEmitt().emitter.emit('updateTitle-' + component.id)
} else if (['style', 'commonBackground', 'events'].includes(type)) { } else if (['style', 'commonBackground', 'events', 'propValue'].includes(type)) {
const mobileComponent = findComponentById(component.id) const mobileComponent = findComponentById(component.id)
mobileComponent[type] = component[type] mobileComponent[type] = component[type]
} }

4
sdk/common/src/main/java/io/dataease/utils/SnowFlake.java
View File

@ -26,7 +26,7 @@ public class SnowFlake {
*/ */
private final static long MACHINE_LEFT = SEQUENCE_BIT; private final static long MACHINE_LEFT = SEQUENCE_BIT;
private final static long DATACENTER_LEFT = SEQUENCE_BIT + MACHINE_BIT; private final static long DATACENTER_LEFT = SEQUENCE_BIT + MACHINE_BIT;
private final static long TIMESTMP_LEFT = DATACENTER_LEFT + DATACENTER_BIT; private final static long TIMESTAMP_LEFT = DATACENTER_LEFT + DATACENTER_BIT;
private long datacenterId; //数据中心 private long datacenterId; //数据中心
private long machineId; //机器标识 private long machineId; //机器标识
@ -69,7 +69,7 @@ public class SnowFlake {
lastStmp = currStmp; lastStmp = currStmp;
return (currStmp - START_STMP) << TIMESTMP_LEFT //时间戳部分 return (currStmp - START_STMP) << TIMESTAMP_LEFT //时间戳部分
| datacenterId << DATACENTER_LEFT //数据中心部分 | datacenterId << DATACENTER_LEFT //数据中心部分
| machineId << MACHINE_LEFT //机器标识部分 | machineId << MACHINE_LEFT //机器标识部分
| sequence; //序列号部分 | sequence; //序列号部分