Merge branch 'fix/OverrideLineForDeviceHistoryQuery' into 'main_dev'

fix: 修复查询单设备属性历史数据组件无分组间隔

See merge request yunteng/thingskit-view!123

@@ -34,7 +34,8 @@ export const option = {
   queryCondition: {
     timeRange: [new Date().getTime() - 86400000, new Date().getTime()], //默认最近一天
     limit: 7,
-    agg: 'NONE'
+    agg: 'NONE',
+    interval: null
   },
   ...otherConfig,
   tooltip: {

+import dayjs, { Dayjs } from 'dayjs';
+
+enum TimeUnit {
+  SECOND = 'second',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+  DAY = 'DAY',
+}
+
+const unitMapping = {
+  [TimeUnit.SECOND]: '秒',
+  [TimeUnit.MINUTE]: '分',
+  [TimeUnit.HOUR]: '小时',
+  [TimeUnit.DAY]: '天',
+};
+
+const unitConversion = {
+  [TimeUnit.SECOND]: 1 * 1000,
+  [TimeUnit.MINUTE]: 1 * 60 * 1000,
+  [TimeUnit.HOUR]: 1 * 60 * 60 * 1000,
+  [TimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000,
+};
+
+export const intervalOption = [
+  {
+    id: 1,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 15,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 2,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 15,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 2,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 12,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 7,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+    ],
+  },
+].map((item) => {
+  return {
+    value: item.id * unitConversion[item.unit],
+    label: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map((item) => {
+      return {
+        value: item.id * unitConversion[item.unit],
+        label: item.id + unitMapping[item.unit],
+      };
+    }),
+  };
+});
+
+const rangeIntervalOption = [
+  {
+    id: 90,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 180,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 360,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+      { id: 30, unit: TimeUnit.DAY },
+    ],
+  },
+].map((item) => {
+  return {
+    value: item.id * unitConversion[item.unit],
+    label: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map((item) => {
+      return {
+        value: item.id * unitConversion[item.unit],
+        label: item.id + unitMapping[item.unit],
+      };
+    }),
+  };
+});
+
+/**
+ * @description
+ * @param {number} value
+ * @returns
+ */
+export function getPacketIntervalByValue(value: number) {
+  return intervalOption.find((item) => item.value === value)?.linkage || [];
+}
+
+export function getPacketIntervalByRange(
+  [start, end] = [null, null] as [Nullable<Dayjs>, Nullable<Dayjs>]
+) {
+  start = typeof start === 'number' ? dayjs(start) : start
+  end = typeof end === 'number' ? dayjs(end) : end
+  
+  if (start && end) {
+    const value = end.diff(start, 'ms');
+    let options: { value: number; label: string }[] = [];
+    for (const item of [...intervalOption, ...rangeIntervalOption]) {
+      if (item.value <= value) continue;
+      if (item.value >= value) {
+        options = item.linkage;
+        break;
+      }
+    }
+    return options;
+  }
+  return [];
+}

 <template>
   <div>
     <n-space vertical>
-      <n-space>
-        <n-date-picker
-          size="small"
-          :to="true"
-          clearable
-          v-model:value="queryCondition.timeRange"
-          type="datetimerange"
-          :shortcuts="rangeShortcuts"
-        />
-        <n-select :style="`width:160px`" v-model:value="queryCondition.agg" :options="aggOptions" clearable />
-        <n-input-number
-          :min="7"
-          :max="50000"
-          :style="`width:160px`"
-          v-if="queryCondition.agg === 'NONE'"
-          v-model:value="queryCondition.limit"
-          clearable
-        />
-      </n-space>
+      <div class="form">
+        <n-date-picker size="small" :to="true" clearable v-model:value="queryCondition.timeRange" type="datetimerange"
+          :shortcuts="rangeShortcuts" format="yyyy-MM-dd" @change="queryCondition.interval = null" />
+        <n-select v-model:value="queryCondition.agg" size="small" :options="aggOptions" clearable
+          @change="handleAggChange" />
+        <n-input-number :min="7" :max="50000" size="small" v-if="queryCondition.agg === 'NONE'"
+          v-model:value="queryCondition.limit" clearable />
+        <n-select v-if="queryCondition.agg !== 'NONE'" size="small" v-model:value="queryCondition.interval"
+          :options="getPacketIntervalByRange(queryCondition.timeRange)" />
+      </div>
     </n-space>
-    <v-chart
-      ref="vChartRef"
-      :init-options="initOptions"
-      :theme="themeColor"
-      :option="option"
-      :manual-update="isPreview()"
+    <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
       :update-options="{
         replaceMerge: replaceMergeArr
-      }"
-      autoresize
-      @mouseover="handleHighlight"
-      @mouseout="handleDownplay"
-    >
+      }" autoresize @mouseover="handleHighlight" @mouseout="handleDownplay">
     </v-chart>
   </div>
 </template>
@@ -58,6 +40,7 @@ import { useFullScreen } from '../../utls/fullScreen'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { useChartInteract } from '@/hooks/external/useChartSelectDeviceInteract.hook'
+import { getPacketIntervalByRange } from './helper'
 
 const props = defineProps({
   themeSetting: {
@@ -273,6 +256,10 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
   updateVChart(newData)
 })
 
+const handleAggChange = (value: string) => {
+  if (value === 'NONE') queryCondition.value.interval = null
+}
+
 onMounted(() => {
   seriesDataMaxLength = dataJson.source.length
   if (props.chartConfig.option.isCarousel) {
@@ -287,7 +274,8 @@ watch(
       startTs: newValue.timeRange.at(-2),
       endTs: newValue.timeRange.at(-1),
       limit: newValue.limit,
-      agg: newValue.agg
+      agg: newValue.agg,
+      interval: newValue.interval
     }
     if (newValue.agg !== 'NONE') {
       Reflect.deleteProperty(obj, 'limit')
@@ -304,4 +292,13 @@ const onChange = (v: object) => {
   // 存储到联动数据
   useChartInteract(props.chartConfig, useChartEditStore, { data: v })
 }
+
 </script>
+
+<style lang="scss" scoped>
+.form {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: 8px;
+}
+</style>

@@ -88,7 +88,6 @@ export const useSyncRemote = () => {
       return
     }
     projectInfoStore.setSaveStatus(SyncEnum.START)
-    console.log(dataViewContent)
     // 保存数据
     const saveContent = {
       dataViewContent: {