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

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

View File

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

View File

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

View File

@ -126,6 +126,7 @@ const handleCurrentPlaceholder = val => {
obj.placeholder = ''
}
currentSearch.value = obj
snapshotStore.recordSnapshotCacheToMobile('propValue')
}
const init = () => {
@ -182,9 +183,21 @@ const checkBold = type => {
chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'bold'
}
const handleCurrentPlaceholderChange = () => {
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 = () => {
snapshotStore.recordSnapshotCacheToMobile('propValue')
}
const checkItalic = type => {
if (!chart.value.customStyle.component.labelShow) return
@ -409,6 +422,7 @@ initParams()
<el-checkbox
:effect="themes"
size="small"
@change="handleCurrentPlaceholderCustomChange"
v-model="chart.customStyle.component.placeholderShow"
>
提示词
@ -427,10 +441,12 @@ initParams()
is-custom
v-model="chart.customStyle.component.text"
:disabled="!chart.customStyle.component.placeholderShow"
@change="handleCurrentPlaceholderCustomChange"
:predefine="predefineColors"
/>
<el-input-number
v-model="chart.customStyle.component.placeholderSize"
@change="handleCurrentPlaceholderCustomChange"
:min="10"
:max="20"
style="margin-left: 8px"

View File

@ -17,8 +17,9 @@ const props = withDefaults(
themes?: EditorTheme
quotaFields: Array<any>
propertyInner?: Array<string>
mobileInPc?: boolean
}>(),
{ themes: 'dark' }
{ themes: 'dark', mobileInPc: false }
)
useEmitt({
@ -391,6 +392,7 @@ onMounted(() => {
</el-row>
<!--gauge-begin-->
<template v-if="!mobileInPc">
<el-form-item
v-show="showProperty('gaugeMinType')"
class="form-item margin-bottom-8"
@ -587,6 +589,8 @@ onMounted(() => {
</el-form-item>
</el-col>
</el-row>
</template>
<!--gauge-end-->
<!--liquid-begin-->

View File

@ -83,7 +83,7 @@ const hanedleMessage = event => {
} else if (type === 'updateTitle') {
mobileViewStyleSwitch(component)
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)
mobileComponent[type] = component[type]
}

View File

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