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

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

@@ -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)
         // 添加新的快照

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

@@ -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"

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

@@ -126,6 +126,7 @@ const handleCurrentPlaceholder = val => {
     obj.placeholder = ''
   }
   currentSearch.value = obj
+  snapshotStore.recordSnapshotCacheToMobile('propValue')
 }
 
 const init = () => {
@@ -182,8 +183,20 @@ const checkBold = type => {
   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 = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCacheToMobile('propValue')
 }
 
 const checkItalic = type => {
@@ -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"

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

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

core/core-frontend/src/views/mobile/panel/index.vue

@@ -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]
     }

sdk/common/src/main/java/io/dataease/utils/SnowFlake.java

@@ -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;                             //序列号部分